diff --git a/webclient/dist/css/main.css b/webclient/dist/css/main.css index 9a3ae1f..77e5f83 100644 --- a/webclient/dist/css/main.css +++ b/webclient/dist/css/main.css @@ -1,2 +1,2 @@ -@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}*{padding:0;margin:0}body,html{font-family:"IBM Plex Mono",monospace;font-weight:400}body{background-color:#0a0a0d;color:#f8f8f8;font-size:15px;line-height:1.45;letter-spacing:.01em} +@charset "UTF-8";@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}.ui_container{padding:34px}.ui_section{margin-bottom:48px}.ui_section_title{margin-bottom:22px}.ui_block{margin-bottom:22px}.ui_block_title{margin-bottom:15px}.ui_text,p{margin-bottom:15px}.ui_hint{margin-top:8px}.ui_list{padding-left:22px;margin-bottom:15px}.ui_list_item{margin-bottom:8px}.ui_list_nested{margin-top:8px}.ui_table{margin-bottom:22px}.ui_table_caption{margin-bottom:8px}.ui_form_group{margin-bottom:15px}.ui_label{margin-bottom:5px;display:block}.ui_input,.ui_select,.ui_textarea{margin-top:5px}.ui_modal_footer,.ui_modal_header{padding:15px 22px}.ui_modal_body{padding:22px}.ui_toast{padding:15px}.ui_toast_stack{gap:8px}html{font-size:100%}body{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:400;line-height:1.6;letter-spacing:0}h1,h2,h3,h4,h5,h6{font-family:"IBM Plex Mono",monospace;font-weight:600;line-height:1.25;margin:0}h1{font-size:36px;letter-spacing:-.01em}h2{font-size:28px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px;font-weight:500}.ui_text,p{font-size:16px;line-height:1.6}.ui_text_sm{font-size:13px;line-height:1.4}.ui_text_lg{font-size:17px;line-height:1.6}.ui_text_muted{font-size:13px}.ui_text_strong,strong{font-weight:600}.ui_text_bold{font-weight:700}.ui_text_italic,em{font-style:italic}.ui_code,code,pre{font-family:"IBM Plex Mono",monospace;font-size:16px;line-height:1.4;background-color:#1a1a23}pre{font-size:16px;line-height:1.6;white-space:pre-wrap}a{font-weight:500;text-decoration:none}.ui_link{font-size:inherit;font-weight:500}.ui_label{font-size:13px;font-weight:500;line-height:1.4}.ui_hint,.ui_meta{font-size:12px;line-height:1.4}.ui_table{font-size:13px;line-height:1.4}.ui_table th{font-weight:600}.ui_table td{font-weight:400}.ui_list{font-size:16px;line-height:1.6}.ui_list_item{font-size:inherit}.ui_modal_title{font-size:20px;font-weight:600}.ui_modal_body{font-size:16px}.ui_toast_title{font-size:14px;font-weight:600}.ui_toast_text{font-size:13px;line-height:1.4}.text_muted{color:#aaaeb2}.ui_palette{display:flex;flex-direction:row;gap:8px}.ui_palette .ui_color .ui_color_box{width:100px;height:80px}.bg_primary{background:#f8f8f8}.bg_secondary{background:#00b3ff}.bg_success{background:#0fa}.bg_accent{background:#f0c}.bg_info{background:#8a2ce2}.bg_warning{background:#ffd900}.bg_error{background:#ff3c00}.btn{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600;line-height:1;letter-spacing:.04em;padding:12px 22px;border-radius:0;border-width:2px;border-left-width:6px;border-style:solid;border-color:#f8f8f8;text-transform:uppercase;background-color:transparent;transition-duration:.2s;transition-property:background-color,border-color,color}.btn.with_icon{border-left-width:48px;position:relative}.btn.with_icon .ph{position:absolute;color:#0a0a0d;left:-48px;top:0;font-size:28px;height:100%;display:inline-flex;align-items:center;width:48px;justify-content:center;transition-duration:.2s;transition-property:color,left}.btn:hover.with_icon .ph{left:-28px}.btn.btn_primary{color:#f8f8f8;border-color:#f8f8f8}.btn.btn_primary:hover{background-color:#f8f8f8;color:#0a0a0d}.btn.btn_secondary{color:#00b3ff;border-color:#00b3ff}.btn.btn_secondary:hover{background-color:#00b3ff;color:#f8f8f8}.btn.btn_secondary:hover.with_icon .ph{color:#f8f8f8}.btn.btn_accent{color:#f0c;border-color:#f0c}.btn.btn_accent:hover{background-color:#f0c;color:#f8f8f8}.btn.btn_accent:hover.with_icon .ph{color:#f8f8f8}.btn.btn_danger{color:#ff3c00;border-color:#ff3c00}.btn.btn_danger:hover{background-color:#ff3c00;color:#0a0a0d}.btn.btn_warning{color:#ffd900;border-color:#ffd900}.btn.btn_warning:hover{background-color:#ffd900;color:#0a0a0d}.btn.btn_success{color:#0fa;border-color:#0fa}.btn.btn_success:hover{background-color:#0fa;color:#0a0a0d}.btn.btn_info{color:#8a2ce2;border-color:#8a2ce2}.btn.btn_info:hover{background-color:#8a2ce2;color:#f8f8f8}.btn.btn_info:hover.with_icon .ph{color:#f8f8f8}.btn[disabled]{color:#aaaeb2;border-color:#1a1a23;background-color:#1a1a23}.btn[disabled].with_icon .ph{color:#aaaeb2}.btn[disabled]:hover{background-color:#1a1a23;color:#aaaeb2}.btn[disabled]:hover.with_icon .ph{color:#aaaeb2}.btn[disabled].with_icon .ph{left:-28px}.btn.btn_small{font-size:14px;font-weight:500;padding:8px 8px}.btn.btn_large{font-size:20px;font-weight:700;padding:15px 48px}.ui_form_group .ui_label{display:flex;flex-direction:column;font-size:17px;max-width:420px;position:relative}.ui_form_group .ui_label .ph{position:absolute;color:#f8f8f8;left:0;bottom:2px;font-size:28px;height:56px;display:inline-flex;align-items:center;width:48px;justify-content:center;transition-duration:.2s;transition-property:color,left}.ui_form_group .ui_label .ui_input{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:500;line-height:1;letter-spacing:.04em;padding:12px 22px;margin-top:8px;border-radius:0;border-width:2px;border-bottom-width:6px;border-style:solid;border-color:#f8f8f8;color:#f8f8f8;background-color:transparent;transition-duration:.2s;transition-property:background-color,border-color,color}.ui_form_group .ui_label .ui_input:hover{border-bottom-color:#aaaeb2}.ui_form_group .ui_label .ui_input:focus{outline:0;border-color:#00b3ff}.ui_form_group .ui_label .ui_input::-moz-placeholder{color:#aaaeb2}.ui_form_group .ui_label .ui_input::placeholder{color:#aaaeb2}.ui_form_group .ui_label textarea.ui_input{height:120px;line-height:1.25;resize:none}.ui_form_group .ui_label .ph+.ui_input,.ui_form_group .ui_label .ph+.ui_select_wrap .ui_select{padding-left:42px}.ui_form_group .ui_label .ui_select_wrap{margin-top:8px}.ui_form_group .ui_label .ui_select{width:100%;height:56px;margin-top:0;appearance:none;-webkit-appearance:none;-moz-appearance:none}.ui_form_group .ui_label .ui_select:focus{outline:0}.ui_form_group .ui_label .ui_select option{color:#f8f8f8;background:#1a1a23}.ui_form_group .ui_label .ui_select_wrap::after{content:"";position:absolute;right:22px;bottom:18px;transform:translateY(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid #f8f8f8;pointer-events:none}.ui_radio{display:inline-flex;flex-direction:row;gap:8px;align-items:center}.ui_radio input[type=radio]{display:none}.ui_radio .ui_radio_control{display:inline-block;border-radius:100%;border:2px solid #f8f8f8;width:20px;height:20px;background:0 0;transition-duration:.2s;transition-property:background,border-color}.ui_radio:hover .ui_radio_control{background:#4a4a57}.ui_radio input[type=radio]:checked+.ui_radio_control{background:#f8f8f8}.ui_radio input[type=radio]:disabled+.ui_radio_control{background:#4a4a57;border-color:#4a4a57}.ui_radio .ui_radio_label{font-size:17px}.ui_checkbox{display:inline-flex;flex-direction:row;gap:8px;align-items:center}.ui_checkbox input[type=checkbox]{display:none}.ui_checkbox .ui_checkbox_control{height:16px;width:30px;border:2px solid #f8f8f8;position:relative;background:0 0;transition-duration:.2s;transition-property:border-color,background;display:block}.ui_checkbox .ui_checkbox_control:before{content:"";display:block;height:20px;width:20px;background:#f8f8f8;position:absolute;left:-6px;top:-4px;transition-duration:.2s;transition-property:left,background}.ui_checkbox:hover .ui_checkbox_control{background:#4a4a57}.ui_checkbox input[type=checkbox]:checked:not(:disabled)+.ui_checkbox_control{background:#00b3ff;border-color:#00b3ff}.ui_checkbox input[type=checkbox]:checked+.ui_checkbox_control:before{left:12px}.ui_checkbox input[type=checkbox]:disabled+.ui_checkbox_control{border-color:#4a4a57}.ui_checkbox input[type=checkbox]:disabled+.ui_checkbox_control:before{background:#4a4a57}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mx-0{margin-left:0!important;margin-right:0!important}.my-0{margin-top:0!important;margin-bottom:0!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.px-0{padding-left:0!important;padding-right:0!important}.py-0{padding-top:0!important;padding-bottom:0!important}.m-1{margin:5px!important}.mt-1{margin-top:5px!important}.mr-1{margin-right:5px!important}.mb-1{margin-bottom:5px!important}.ml-1{margin-left:5px!important}.mx-1{margin-left:5px!important;margin-right:5px!important}.my-1{margin-top:5px!important;margin-bottom:5px!important}.p-1{padding:5px!important}.pt-1{padding-top:5px!important}.pr-1{padding-right:5px!important}.pb-1{padding-bottom:5px!important}.pl-1{padding-left:5px!important}.px-1{padding-left:5px!important;padding-right:5px!important}.py-1{padding-top:5px!important;padding-bottom:5px!important}.m-2{margin:8px!important}.mt-2{margin-top:8px!important}.mr-2{margin-right:8px!important}.mb-2{margin-bottom:8px!important}.ml-2{margin-left:8px!important}.mx-2{margin-left:8px!important;margin-right:8px!important}.my-2{margin-top:8px!important;margin-bottom:8px!important}.p-2{padding:8px!important}.pt-2{padding-top:8px!important}.pr-2{padding-right:8px!important}.pb-2{padding-bottom:8px!important}.pl-2{padding-left:8px!important}.px-2{padding-left:8px!important;padding-right:8px!important}.py-2{padding-top:8px!important;padding-bottom:8px!important}.m-3{margin:12px!important}.mt-3{margin-top:12px!important}.mr-3{margin-right:12px!important}.mb-3{margin-bottom:12px!important}.ml-3{margin-left:12px!important}.mx-3{margin-left:12px!important;margin-right:12px!important}.my-3{margin-top:12px!important;margin-bottom:12px!important}.p-3{padding:12px!important}.pt-3{padding-top:12px!important}.pr-3{padding-right:12px!important}.pb-3{padding-bottom:12px!important}.pl-3{padding-left:12px!important}.px-3{padding-left:12px!important;padding-right:12px!important}.py-3{padding-top:12px!important;padding-bottom:12px!important}.m-4{margin:15px!important}.mt-4{margin-top:15px!important}.mr-4{margin-right:15px!important}.mb-4{margin-bottom:15px!important}.ml-4{margin-left:15px!important}.mx-4{margin-left:15px!important;margin-right:15px!important}.my-4{margin-top:15px!important;margin-bottom:15px!important}.p-4{padding:15px!important}.pt-4{padding-top:15px!important}.pr-4{padding-right:15px!important}.pb-4{padding-bottom:15px!important}.pl-4{padding-left:15px!important}.px-4{padding-left:15px!important;padding-right:15px!important}.py-4{padding-top:15px!important;padding-bottom:15px!important}.m-5{margin:18px!important}.mt-5{margin-top:18px!important}.mr-5{margin-right:18px!important}.mb-5{margin-bottom:18px!important}.ml-5{margin-left:18px!important}.mx-5{margin-left:18px!important;margin-right:18px!important}.my-5{margin-top:18px!important;margin-bottom:18px!important}.p-5{padding:18px!important}.pt-5{padding-top:18px!important}.pr-5{padding-right:18px!important}.pb-5{padding-bottom:18px!important}.pl-5{padding-left:18px!important}.px-5{padding-left:18px!important;padding-right:18px!important}.py-5{padding-top:18px!important;padding-bottom:18px!important}.m-6{margin:22px!important}.mt-6{margin-top:22px!important}.mr-6{margin-right:22px!important}.mb-6{margin-bottom:22px!important}.ml-6{margin-left:22px!important}.mx-6{margin-left:22px!important;margin-right:22px!important}.my-6{margin-top:22px!important;margin-bottom:22px!important}.p-6{padding:22px!important}.pt-6{padding-top:22px!important}.pr-6{padding-right:22px!important}.pb-6{padding-bottom:22px!important}.pl-6{padding-left:22px!important}.px-6{padding-left:22px!important;padding-right:22px!important}.py-6{padding-top:22px!important;padding-bottom:22px!important}.m-7{margin:26px!important}.mt-7{margin-top:26px!important}.mr-7{margin-right:26px!important}.mb-7{margin-bottom:26px!important}.ml-7{margin-left:26px!important}.mx-7{margin-left:26px!important;margin-right:26px!important}.my-7{margin-top:26px!important;margin-bottom:26px!important}.p-7{padding:26px!important}.pt-7{padding-top:26px!important}.pr-7{padding-right:26px!important}.pb-7{padding-bottom:26px!important}.pl-7{padding-left:26px!important}.px-7{padding-left:26px!important;padding-right:26px!important}.py-7{padding-top:26px!important;padding-bottom:26px!important}.m-8{margin:34px!important}.mt-8{margin-top:34px!important}.mr-8{margin-right:34px!important}.mb-8{margin-bottom:34px!important}.ml-8{margin-left:34px!important}.mx-8{margin-left:34px!important;margin-right:34px!important}.my-8{margin-top:34px!important;margin-bottom:34px!important}.p-8{padding:34px!important}.pt-8{padding-top:34px!important}.pr-8{padding-right:34px!important}.pb-8{padding-bottom:34px!important}.pl-8{padding-left:34px!important}.px-8{padding-left:34px!important;padding-right:34px!important}.py-8{padding-top:34px!important;padding-bottom:34px!important}.m-9{margin:42px!important}.mt-9{margin-top:42px!important}.mr-9{margin-right:42px!important}.mb-9{margin-bottom:42px!important}.ml-9{margin-left:42px!important}.mx-9{margin-left:42px!important;margin-right:42px!important}.my-9{margin-top:42px!important;margin-bottom:42px!important}.p-9{padding:42px!important}.pt-9{padding-top:42px!important}.pr-9{padding-right:42px!important}.pb-9{padding-bottom:42px!important}.pl-9{padding-left:42px!important}.px-9{padding-left:42px!important;padding-right:42px!important}.py-9{padding-top:42px!important;padding-bottom:42px!important}.m-10{margin:48px!important}.mt-10{margin-top:48px!important}.mr-10{margin-right:48px!important}.mb-10{margin-bottom:48px!important}.ml-10{margin-left:48px!important}.mx-10{margin-left:48px!important;margin-right:48px!important}.my-10{margin-top:48px!important;margin-bottom:48px!important}.p-10{padding:48px!important}.pt-10{padding-top:48px!important}.pr-10{padding-right:48px!important}.pb-10{padding-bottom:48px!important}.pl-10{padding-left:48px!important}.px-10{padding-left:48px!important;padding-right:48px!important}.py-10{padding-top:48px!important;padding-bottom:48px!important}*{box-sizing:border-box}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{width:10px;background:#0a0a0d;cursor:pointer}::-webkit-scrollbar-thumb{width:10px;background:#4a4a57;cursor:default}::-webkit-scrollbar-corner{background:0 0;height:1px}::-webkit-scrollbar-button{display:none}*{padding:0;margin:0}body,html{font-family:"IBM Plex Mono",monospace;font-weight:400}body{background-color:#0a0a0d;color:#f8f8f8;font-size:15px;line-height:1.45;letter-spacing:.01em} /*# sourceMappingURL=main.css.map */ diff --git a/webclient/dist/css/main.css.map b/webclient/dist/css/main.css.map index 64012ea..e6bef85 100644 --- a/webclient/dist/css/main.css.map +++ b/webclient/dist/css/main.css.map @@ -1 +1 @@ -{"version":3,"sources":["fonts.scss","main.scss"],"names":[],"mappings":"AAAA,WACE,YAAA,gBACA,IAAA,yDAAA,mBACA,YAAA,IACA,WAAA,OACA,aAAA,KAGF,WACE,YAAA,gBACA,IAAA,wDAAA,mBACA,YAAA,IACA,WAAA,OACA,aAAA,KAGF,WACE,YAAA,gBACA,IAAA,0DAAA,mBACA,YAAA,IACA,WAAA,OACA,aAAA,KAGF,WACE,YAAA,gBACA,IAAA,sDAAA,mBACA,YAAA,IACA,WAAA,OACA,aAAA,KAGF,WACE,YAAA,gBACA,IAAA,wDAAA,mBACA,YAAA,IACA,WAAA,OACA,aAAA,KClCF,EACC,QAAA,EACA,OAAA,EAGD,KAAA,KACE,YAAA,eAAA,CAAA,UACA,YAAA,IAGF,KACC,iBAAA,QACA,MAAA,QAEA,UAAA,KACC,YAAA,KACA,eAAA","file":"main.css","sourcesContent":["@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf\") format(\"truetype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf\") format(\"truetype\");\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf\") format(\"truetype\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf\") format(\"truetype\");\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf\") format(\"truetype\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n","@import \"fonts.scss\";\n@import \"palette.scss\";\n\n* {\n\tpadding: 0;\n\tmargin: 0;\n}\n\nhtml, body {\n font-family: \"IBM Plex Mono\", monospace;\n font-weight: 400;\n}\n\nbody {\n\tbackground-color: $color-black;\n\tcolor: $color-text-light;\n\n\tfont-size: 15px;\n line-height: 1.45;\n letter-spacing: 0.01em;\n}"]} \ No newline at end of file +{"version":3,"sources":["_fonts.scss","_spacing.scss","main.css","ui_components/_typography.scss","ui_components/_palette.scss","ui_components/_buttons.scss","ui_components/_forms.scss","_utils.scss","_ui.scss","main.scss"],"names":[],"mappings":"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","file":"main.css","sourcesContent":["@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf\") format(\"truetype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf\") format(\"truetype\");\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf\") format(\"truetype\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf\") format(\"truetype\");\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf\") format(\"truetype\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n","/* =========================\n SPACING SCALE\n========================= */\n\n$space-0: 0;\n$space-1: 5px;\n$space-2: 8px;\n$space-3: 12px;\n$space-4: 15px;\n$space-5: 18px;\n$space-6: 22px;\n$space-7: 26px;\n$space-8: 34px;\n$space-9: 42px;\n$space-10: 48px;\n$space-11: 64px;\n$space-12: 80px;\n\n/* alias для читаемости */\n$space-xs: $space-1;\n$space-sm: $space-2;\n$space-md: $space-4;\n$space-lg: $space-6;\n$space-xl: $space-8;\n$space-xxl: $space-10;\n\n/* map — для генерации утилит */\n$spaces: (\n 0: $space-0,\n 1: $space-1,\n 2: $space-2,\n 3: $space-3,\n 4: $space-4,\n 5: $space-5,\n 6: $space-6,\n 7: $space-7,\n 8: $space-8,\n 9: $space-9,\n 10: $space-10\n);\n\n/* =========================\n BASE LAYOUT\n========================= */\n\n.ui_container {\n padding: $space-xl;\n}\n\n.ui_section {\n margin-bottom: $space-xxl;\n}\n\n.ui_section_title {\n margin-bottom: $space-lg;\n}\n\n.ui_block {\n margin-bottom: $space-lg;\n}\n\n.ui_block_title {\n margin-bottom: $space-md;\n}\n\n/* =========================\n TEXT & CONTENT\n========================= */\n\np,\n.ui_text {\n margin-bottom: $space-md;\n}\n\n.ui_hint {\n margin-top: $space-sm;\n}\n\n/* =========================\n LISTS\n========================= */\n\n.ui_list {\n padding-left: $space-lg;\n margin-bottom: $space-md;\n}\n\n.ui_list_item {\n margin-bottom: $space-sm;\n}\n\n.ui_list_nested {\n margin-top: $space-sm;\n}\n\n/* =========================\n TABLES\n========================= */\n\n.ui_table {\n margin-bottom: $space-lg;\n}\n\n.ui_table_caption {\n margin-bottom: $space-sm;\n}\n\n/* =========================\n FORMS\n========================= */\n\n.ui_form_group {\n margin-bottom: $space-md;\n}\n\n.ui_label {\n margin-bottom: $space-xs;\n display: block;\n}\n\n.ui_input,\n.ui_textarea,\n.ui_select {\n margin-top: $space-xs;\n}\n\n/* =========================\n MODALS\n========================= */\n\n.ui_modal_header,\n.ui_modal_footer {\n padding: $space-md $space-lg;\n}\n\n.ui_modal_body {\n padding: $space-lg;\n}\n\n/* =========================\n TOASTS\n========================= */\n\n.ui_toast {\n padding: $space-md;\n}\n\n.ui_toast_stack {\n gap: $space-sm;\n}\n","@charset \"UTF-8\";\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf\") format(\"truetype\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf\") format(\"truetype\");\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf\") format(\"truetype\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf\") format(\"truetype\");\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"IBM Plex Mono\";\n src: url(\"/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf\") format(\"truetype\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n/* =========================\n SPACING SCALE\n========================= */\n/* alias для читаемости */\n/* map — для генерации утилит */\n/* =========================\n BASE LAYOUT\n========================= */\n.ui_container {\n padding: 34px;\n}\n\n.ui_section {\n margin-bottom: 48px;\n}\n\n.ui_section_title {\n margin-bottom: 22px;\n}\n\n.ui_block {\n margin-bottom: 22px;\n}\n\n.ui_block_title {\n margin-bottom: 15px;\n}\n\n/* =========================\n TEXT & CONTENT\n========================= */\np,\n.ui_text {\n margin-bottom: 15px;\n}\n\n.ui_hint {\n margin-top: 8px;\n}\n\n/* =========================\n LISTS\n========================= */\n.ui_list {\n padding-left: 22px;\n margin-bottom: 15px;\n}\n\n.ui_list_item {\n margin-bottom: 8px;\n}\n\n.ui_list_nested {\n margin-top: 8px;\n}\n\n/* =========================\n TABLES\n========================= */\n.ui_table {\n margin-bottom: 22px;\n}\n\n.ui_table_caption {\n margin-bottom: 8px;\n}\n\n/* =========================\n FORMS\n========================= */\n.ui_form_group {\n margin-bottom: 15px;\n}\n\n.ui_label {\n margin-bottom: 5px;\n display: block;\n}\n\n.ui_input,\n.ui_textarea,\n.ui_select {\n margin-top: 5px;\n}\n\n/* =========================\n MODALS\n========================= */\n.ui_modal_header,\n.ui_modal_footer {\n padding: 15px 22px;\n}\n\n.ui_modal_body {\n padding: 22px;\n}\n\n/* =========================\n TOASTS\n========================= */\n.ui_toast {\n padding: 15px;\n}\n\n.ui_toast_stack {\n gap: 8px;\n}\n\n/* =========================\n FONT FAMILIES\n========================= */\n/* =========================\n FONT WEIGHTS\n========================= */\n/* =========================\n FONT SIZES (scale)\n========================= */\n/* =========================\n LINE HEIGHTS\n========================= */\n/* =========================\n LETTER SPACING\n========================= */\n/* =========================\n BASE TYPOGRAPHY\n========================= */\nhtml {\n font-size: 100%;\n}\n\nbody {\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 16px;\n font-weight: 400;\n line-height: 1.6;\n letter-spacing: 0;\n}\n\n/* =========================\n HEADINGS\n========================= */\nh1, h2, h3, h4, h5, h6 {\n font-family: \"IBM Plex Mono\", monospace;\n font-weight: 600;\n line-height: 1.25;\n margin: 0;\n}\n\nh1 {\n font-size: 36px;\n letter-spacing: -0.01em;\n}\n\nh2 {\n font-size: 28px;\n}\n\nh3 {\n font-size: 24px;\n}\n\nh4 {\n font-size: 20px;\n}\n\nh5 {\n font-size: 18px;\n}\n\nh6 {\n font-size: 16px;\n font-weight: 500;\n}\n\n/* =========================\n TEXT VARIANTS\n========================= */\n.ui_text,\np {\n font-size: 16px;\n line-height: 1.6;\n}\n\n.ui_text_sm {\n font-size: 13px;\n line-height: 1.4;\n}\n\n.ui_text_lg {\n font-size: 17px;\n line-height: 1.6;\n}\n\n.ui_text_muted {\n font-size: 13px;\n}\n\n.ui_text_strong,\nstrong {\n font-weight: 600;\n}\n\n.ui_text_bold {\n font-weight: 700;\n}\n\n.ui_text_italic,\nem {\n font-style: italic;\n}\n\n/* =========================\n CODE / MONO\n========================= */\ncode,\npre,\n.ui_code {\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 16px;\n line-height: 1.4;\n background-color: #1A1A23;\n}\n\npre {\n font-size: 16px;\n line-height: 1.6;\n white-space: pre-wrap;\n}\n\n/* =========================\n LINKS\n========================= */\na {\n font-weight: 500;\n text-decoration: none;\n}\n\n.ui_link {\n font-size: inherit;\n font-weight: 500;\n}\n\n/* =========================\n LABELS / META\n========================= */\n.ui_label {\n font-size: 13px;\n font-weight: 500;\n line-height: 1.4;\n}\n\n.ui_hint,\n.ui_meta {\n font-size: 12px;\n line-height: 1.4;\n}\n\n/* =========================\n TABLE TEXT\n========================= */\n.ui_table {\n font-size: 13px;\n line-height: 1.4;\n}\n\n.ui_table th {\n font-weight: 600;\n}\n\n.ui_table td {\n font-weight: 400;\n}\n\n/* =========================\n LISTS\n========================= */\n.ui_list {\n font-size: 16px;\n line-height: 1.6;\n}\n\n.ui_list_item {\n font-size: inherit;\n}\n\n/* =========================\n MODALS\n========================= */\n.ui_modal_title {\n font-size: 20px;\n font-weight: 600;\n}\n\n.ui_modal_body {\n font-size: 16px;\n}\n\n/* =========================\n TOASTS\n========================= */\n.ui_toast_title {\n font-size: 14px;\n font-weight: 600;\n}\n\n.ui_toast_text {\n font-size: 13px;\n line-height: 1.4;\n}\n\n.text_muted {\n color: #AAAEB2;\n}\n\n.ui_palette {\n display: flex;\n flex-direction: row;\n gap: 8px;\n}\n.ui_palette .ui_color .ui_color_box {\n width: 100px;\n height: 80px;\n}\n\n.bg_primary {\n background: #F8F8F8;\n}\n\n.bg_secondary {\n background: #00B3FF;\n}\n\n.bg_success {\n background: #00FFAA;\n}\n\n.bg_accent {\n background: #FF00CC;\n}\n\n.bg_info {\n background: #8A2CE2;\n}\n\n.bg_warning {\n background: #FFD900;\n}\n\n.bg_error {\n background: #FF3C00;\n}\n\n.btn {\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 17px;\n font-weight: 600;\n line-height: 1;\n letter-spacing: 0.04em;\n padding: 12px 22px;\n border-radius: 0;\n border-width: 2px;\n border-left-width: 6px;\n border-style: solid;\n border-color: #F8F8F8;\n text-transform: uppercase;\n background-color: transparent;\n transition-duration: 0.2s;\n transition-property: background-color, border-color, color;\n}\n.btn.with_icon {\n border-left-width: 48px;\n position: relative;\n}\n.btn.with_icon .ph {\n position: absolute;\n color: #0a0a0d;\n left: -48px;\n top: 0;\n font-size: 28px;\n height: 100%;\n display: inline-flex;\n align-items: center;\n width: 48px;\n justify-content: center;\n transition-duration: 0.2s;\n transition-property: color, left;\n}\n.btn:hover.with_icon .ph {\n left: -28px;\n}\n.btn.btn_primary {\n color: #F8F8F8;\n border-color: #F8F8F8;\n}\n.btn.btn_primary:hover {\n background-color: #F8F8F8;\n color: #0A0A0D;\n}\n.btn.btn_secondary {\n color: #00B3FF;\n border-color: #00B3FF;\n}\n.btn.btn_secondary:hover {\n background-color: #00B3FF;\n color: #F8F8F8;\n}\n.btn.btn_secondary:hover.with_icon .ph {\n color: #F8F8F8;\n}\n.btn.btn_accent {\n color: #FF00CC;\n border-color: #FF00CC;\n}\n.btn.btn_accent:hover {\n background-color: #FF00CC;\n color: #F8F8F8;\n}\n.btn.btn_accent:hover.with_icon .ph {\n color: #F8F8F8;\n}\n.btn.btn_danger {\n color: #FF3C00;\n border-color: #FF3C00;\n}\n.btn.btn_danger:hover {\n background-color: #FF3C00;\n color: #0A0A0D;\n}\n.btn.btn_warning {\n color: #FFD900;\n border-color: #FFD900;\n}\n.btn.btn_warning:hover {\n background-color: #FFD900;\n color: #0A0A0D;\n}\n.btn.btn_success {\n color: #00FFAA;\n border-color: #00FFAA;\n}\n.btn.btn_success:hover {\n background-color: #00FFAA;\n color: #0A0A0D;\n}\n.btn.btn_info {\n color: #8A2CE2;\n border-color: #8A2CE2;\n}\n.btn.btn_info:hover {\n background-color: #8A2CE2;\n color: #F8F8F8;\n}\n.btn.btn_info:hover.with_icon .ph {\n color: #F8F8F8;\n}\n.btn[disabled] {\n color: #AAAEB2;\n border-color: #1A1A23;\n background-color: #1A1A23;\n}\n.btn[disabled].with_icon .ph {\n color: #AAAEB2;\n}\n.btn[disabled]:hover {\n background-color: #1A1A23;\n color: #AAAEB2;\n}\n.btn[disabled]:hover.with_icon .ph {\n color: #AAAEB2;\n}\n.btn[disabled].with_icon .ph {\n left: -28px;\n}\n.btn.btn_small {\n font-size: 14px;\n font-weight: 500;\n padding: 8px 8px;\n}\n.btn.btn_large {\n font-size: 20px;\n font-weight: 700;\n padding: 15px 48px;\n}\n\n.ui_form_group .ui_label {\n display: flex;\n flex-direction: column;\n font-size: 17px;\n max-width: 420px;\n position: relative;\n}\n.ui_form_group .ui_label .ph {\n position: absolute;\n color: #F8F8F8;\n left: 0px;\n bottom: 2px;\n font-size: 28px;\n height: 56px;\n display: inline-flex;\n align-items: center;\n width: 48px;\n justify-content: center;\n transition-duration: 0.2s;\n transition-property: color, left;\n}\n.ui_form_group .ui_label .ui_input {\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 16px;\n font-weight: 500;\n line-height: 1;\n letter-spacing: 0.04em;\n padding: 12px 22px;\n margin-top: 8px;\n border-radius: 0;\n border-width: 2px;\n border-bottom-width: 6px;\n border-style: solid;\n border-color: #F8F8F8;\n color: #F8F8F8;\n background-color: transparent;\n transition-duration: 0.2s;\n transition-property: background-color, border-color, color;\n}\n.ui_form_group .ui_label .ui_input:hover {\n border-bottom-color: #AAAEB2;\n}\n.ui_form_group .ui_label .ui_input:focus {\n outline: none;\n border-color: #00B3FF;\n}\n.ui_form_group .ui_label .ui_input::placeholder {\n color: #AAAEB2;\n}\n.ui_form_group .ui_label textarea.ui_input {\n height: 120px;\n line-height: 1.25;\n resize: none;\n}\n.ui_form_group .ui_label .ph + .ui_input,\n.ui_form_group .ui_label .ph + .ui_select_wrap .ui_select {\n padding-left: 42px;\n}\n.ui_form_group .ui_label .ui_select_wrap {\n margin-top: 8px;\n}\n.ui_form_group .ui_label .ui_select {\n width: 100%;\n height: 56px;\n margin-top: 0;\n /* убрать нативную стрелку */\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n}\n.ui_form_group .ui_label .ui_select:focus {\n outline: none;\n}\n.ui_form_group .ui_label .ui_select option {\n color: #F8F8F8;\n background: #1A1A23;\n}\n.ui_form_group .ui_label .ui_select_wrap::after {\n content: \"\";\n position: absolute;\n right: 22px;\n bottom: 18px;\n transform: translateY(-50%);\n width: 0;\n height: 0;\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n border-top: 10px solid #F8F8F8;\n pointer-events: none; /* чтобы клики шли в select */\n}\n\n.ui_radio {\n display: inline-flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n}\n.ui_radio input[type=radio] {\n display: none;\n}\n.ui_radio .ui_radio_control {\n display: inline-block;\n border-radius: 100%;\n border: 2px solid #F8F8F8;\n width: 20px;\n height: 20px;\n background: transparent;\n transition-duration: 0.2s;\n transition-property: background, border-color;\n}\n.ui_radio:hover .ui_radio_control {\n background: #4A4A57;\n}\n.ui_radio input[type=radio]:checked + .ui_radio_control {\n background: #F8F8F8;\n}\n.ui_radio input[type=radio]:disabled + .ui_radio_control {\n background: #4A4A57;\n border-color: #4A4A57;\n}\n.ui_radio .ui_radio_label {\n font-size: 17px;\n}\n\n.ui_checkbox {\n display: inline-flex;\n flex-direction: row;\n gap: 8px;\n align-items: center;\n}\n.ui_checkbox input[type=checkbox] {\n display: none;\n}\n.ui_checkbox .ui_checkbox_control {\n height: 16px;\n width: 30px;\n border: 2px solid #F8F8F8;\n position: relative;\n background: transparent;\n transition-duration: 0.2s;\n transition-property: border-color, background;\n display: block;\n}\n.ui_checkbox .ui_checkbox_control:before {\n content: \"\";\n display: block;\n height: 20px;\n width: 20px;\n background: #F8F8F8;\n position: absolute;\n left: -6px;\n top: -4px;\n transition-duration: 0.2s;\n transition-property: left, background;\n}\n.ui_checkbox:hover .ui_checkbox_control {\n background: #4A4A57;\n}\n.ui_checkbox input[type=checkbox]:checked:not(:disabled) + .ui_checkbox_control {\n background: #00B3FF;\n border-color: #00B3FF;\n}\n.ui_checkbox input[type=checkbox]:checked + .ui_checkbox_control:before {\n left: 12px;\n}\n.ui_checkbox input[type=checkbox]:disabled + .ui_checkbox_control {\n border-color: #4A4A57;\n}\n.ui_checkbox input[type=checkbox]:disabled + .ui_checkbox_control:before {\n background: #4A4A57;\n}\n\n/* =========================\n SPACING UTILITIES\n========================= */\n/* margin */\n.m-0 {\n margin: 0 !important;\n}\n\n.mt-0 {\n margin-top: 0 !important;\n}\n\n.mr-0 {\n margin-right: 0 !important;\n}\n\n.mb-0 {\n margin-bottom: 0 !important;\n}\n\n.ml-0 {\n margin-left: 0 !important;\n}\n\n.mx-0 {\n margin-left: 0 !important;\n margin-right: 0 !important;\n}\n\n.my-0 {\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n}\n\n/* padding */\n.p-0 {\n padding: 0 !important;\n}\n\n.pt-0 {\n padding-top: 0 !important;\n}\n\n.pr-0 {\n padding-right: 0 !important;\n}\n\n.pb-0 {\n padding-bottom: 0 !important;\n}\n\n.pl-0 {\n padding-left: 0 !important;\n}\n\n.px-0 {\n padding-left: 0 !important;\n padding-right: 0 !important;\n}\n\n.py-0 {\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n}\n\n/* margin */\n.m-1 {\n margin: 5px !important;\n}\n\n.mt-1 {\n margin-top: 5px !important;\n}\n\n.mr-1 {\n margin-right: 5px !important;\n}\n\n.mb-1 {\n margin-bottom: 5px !important;\n}\n\n.ml-1 {\n margin-left: 5px !important;\n}\n\n.mx-1 {\n margin-left: 5px !important;\n margin-right: 5px !important;\n}\n\n.my-1 {\n margin-top: 5px !important;\n margin-bottom: 5px !important;\n}\n\n/* padding */\n.p-1 {\n padding: 5px !important;\n}\n\n.pt-1 {\n padding-top: 5px !important;\n}\n\n.pr-1 {\n padding-right: 5px !important;\n}\n\n.pb-1 {\n padding-bottom: 5px !important;\n}\n\n.pl-1 {\n padding-left: 5px !important;\n}\n\n.px-1 {\n padding-left: 5px !important;\n padding-right: 5px !important;\n}\n\n.py-1 {\n padding-top: 5px !important;\n padding-bottom: 5px !important;\n}\n\n/* margin */\n.m-2 {\n margin: 8px !important;\n}\n\n.mt-2 {\n margin-top: 8px !important;\n}\n\n.mr-2 {\n margin-right: 8px !important;\n}\n\n.mb-2 {\n margin-bottom: 8px !important;\n}\n\n.ml-2 {\n margin-left: 8px !important;\n}\n\n.mx-2 {\n margin-left: 8px !important;\n margin-right: 8px !important;\n}\n\n.my-2 {\n margin-top: 8px !important;\n margin-bottom: 8px !important;\n}\n\n/* padding */\n.p-2 {\n padding: 8px !important;\n}\n\n.pt-2 {\n padding-top: 8px !important;\n}\n\n.pr-2 {\n padding-right: 8px !important;\n}\n\n.pb-2 {\n padding-bottom: 8px !important;\n}\n\n.pl-2 {\n padding-left: 8px !important;\n}\n\n.px-2 {\n padding-left: 8px !important;\n padding-right: 8px !important;\n}\n\n.py-2 {\n padding-top: 8px !important;\n padding-bottom: 8px !important;\n}\n\n/* margin */\n.m-3 {\n margin: 12px !important;\n}\n\n.mt-3 {\n margin-top: 12px !important;\n}\n\n.mr-3 {\n margin-right: 12px !important;\n}\n\n.mb-3 {\n margin-bottom: 12px !important;\n}\n\n.ml-3 {\n margin-left: 12px !important;\n}\n\n.mx-3 {\n margin-left: 12px !important;\n margin-right: 12px !important;\n}\n\n.my-3 {\n margin-top: 12px !important;\n margin-bottom: 12px !important;\n}\n\n/* padding */\n.p-3 {\n padding: 12px !important;\n}\n\n.pt-3 {\n padding-top: 12px !important;\n}\n\n.pr-3 {\n padding-right: 12px !important;\n}\n\n.pb-3 {\n padding-bottom: 12px !important;\n}\n\n.pl-3 {\n padding-left: 12px !important;\n}\n\n.px-3 {\n padding-left: 12px !important;\n padding-right: 12px !important;\n}\n\n.py-3 {\n padding-top: 12px !important;\n padding-bottom: 12px !important;\n}\n\n/* margin */\n.m-4 {\n margin: 15px !important;\n}\n\n.mt-4 {\n margin-top: 15px !important;\n}\n\n.mr-4 {\n margin-right: 15px !important;\n}\n\n.mb-4 {\n margin-bottom: 15px !important;\n}\n\n.ml-4 {\n margin-left: 15px !important;\n}\n\n.mx-4 {\n margin-left: 15px !important;\n margin-right: 15px !important;\n}\n\n.my-4 {\n margin-top: 15px !important;\n margin-bottom: 15px !important;\n}\n\n/* padding */\n.p-4 {\n padding: 15px !important;\n}\n\n.pt-4 {\n padding-top: 15px !important;\n}\n\n.pr-4 {\n padding-right: 15px !important;\n}\n\n.pb-4 {\n padding-bottom: 15px !important;\n}\n\n.pl-4 {\n padding-left: 15px !important;\n}\n\n.px-4 {\n padding-left: 15px !important;\n padding-right: 15px !important;\n}\n\n.py-4 {\n padding-top: 15px !important;\n padding-bottom: 15px !important;\n}\n\n/* margin */\n.m-5 {\n margin: 18px !important;\n}\n\n.mt-5 {\n margin-top: 18px !important;\n}\n\n.mr-5 {\n margin-right: 18px !important;\n}\n\n.mb-5 {\n margin-bottom: 18px !important;\n}\n\n.ml-5 {\n margin-left: 18px !important;\n}\n\n.mx-5 {\n margin-left: 18px !important;\n margin-right: 18px !important;\n}\n\n.my-5 {\n margin-top: 18px !important;\n margin-bottom: 18px !important;\n}\n\n/* padding */\n.p-5 {\n padding: 18px !important;\n}\n\n.pt-5 {\n padding-top: 18px !important;\n}\n\n.pr-5 {\n padding-right: 18px !important;\n}\n\n.pb-5 {\n padding-bottom: 18px !important;\n}\n\n.pl-5 {\n padding-left: 18px !important;\n}\n\n.px-5 {\n padding-left: 18px !important;\n padding-right: 18px !important;\n}\n\n.py-5 {\n padding-top: 18px !important;\n padding-bottom: 18px !important;\n}\n\n/* margin */\n.m-6 {\n margin: 22px !important;\n}\n\n.mt-6 {\n margin-top: 22px !important;\n}\n\n.mr-6 {\n margin-right: 22px !important;\n}\n\n.mb-6 {\n margin-bottom: 22px !important;\n}\n\n.ml-6 {\n margin-left: 22px !important;\n}\n\n.mx-6 {\n margin-left: 22px !important;\n margin-right: 22px !important;\n}\n\n.my-6 {\n margin-top: 22px !important;\n margin-bottom: 22px !important;\n}\n\n/* padding */\n.p-6 {\n padding: 22px !important;\n}\n\n.pt-6 {\n padding-top: 22px !important;\n}\n\n.pr-6 {\n padding-right: 22px !important;\n}\n\n.pb-6 {\n padding-bottom: 22px !important;\n}\n\n.pl-6 {\n padding-left: 22px !important;\n}\n\n.px-6 {\n padding-left: 22px !important;\n padding-right: 22px !important;\n}\n\n.py-6 {\n padding-top: 22px !important;\n padding-bottom: 22px !important;\n}\n\n/* margin */\n.m-7 {\n margin: 26px !important;\n}\n\n.mt-7 {\n margin-top: 26px !important;\n}\n\n.mr-7 {\n margin-right: 26px !important;\n}\n\n.mb-7 {\n margin-bottom: 26px !important;\n}\n\n.ml-7 {\n margin-left: 26px !important;\n}\n\n.mx-7 {\n margin-left: 26px !important;\n margin-right: 26px !important;\n}\n\n.my-7 {\n margin-top: 26px !important;\n margin-bottom: 26px !important;\n}\n\n/* padding */\n.p-7 {\n padding: 26px !important;\n}\n\n.pt-7 {\n padding-top: 26px !important;\n}\n\n.pr-7 {\n padding-right: 26px !important;\n}\n\n.pb-7 {\n padding-bottom: 26px !important;\n}\n\n.pl-7 {\n padding-left: 26px !important;\n}\n\n.px-7 {\n padding-left: 26px !important;\n padding-right: 26px !important;\n}\n\n.py-7 {\n padding-top: 26px !important;\n padding-bottom: 26px !important;\n}\n\n/* margin */\n.m-8 {\n margin: 34px !important;\n}\n\n.mt-8 {\n margin-top: 34px !important;\n}\n\n.mr-8 {\n margin-right: 34px !important;\n}\n\n.mb-8 {\n margin-bottom: 34px !important;\n}\n\n.ml-8 {\n margin-left: 34px !important;\n}\n\n.mx-8 {\n margin-left: 34px !important;\n margin-right: 34px !important;\n}\n\n.my-8 {\n margin-top: 34px !important;\n margin-bottom: 34px !important;\n}\n\n/* padding */\n.p-8 {\n padding: 34px !important;\n}\n\n.pt-8 {\n padding-top: 34px !important;\n}\n\n.pr-8 {\n padding-right: 34px !important;\n}\n\n.pb-8 {\n padding-bottom: 34px !important;\n}\n\n.pl-8 {\n padding-left: 34px !important;\n}\n\n.px-8 {\n padding-left: 34px !important;\n padding-right: 34px !important;\n}\n\n.py-8 {\n padding-top: 34px !important;\n padding-bottom: 34px !important;\n}\n\n/* margin */\n.m-9 {\n margin: 42px !important;\n}\n\n.mt-9 {\n margin-top: 42px !important;\n}\n\n.mr-9 {\n margin-right: 42px !important;\n}\n\n.mb-9 {\n margin-bottom: 42px !important;\n}\n\n.ml-9 {\n margin-left: 42px !important;\n}\n\n.mx-9 {\n margin-left: 42px !important;\n margin-right: 42px !important;\n}\n\n.my-9 {\n margin-top: 42px !important;\n margin-bottom: 42px !important;\n}\n\n/* padding */\n.p-9 {\n padding: 42px !important;\n}\n\n.pt-9 {\n padding-top: 42px !important;\n}\n\n.pr-9 {\n padding-right: 42px !important;\n}\n\n.pb-9 {\n padding-bottom: 42px !important;\n}\n\n.pl-9 {\n padding-left: 42px !important;\n}\n\n.px-9 {\n padding-left: 42px !important;\n padding-right: 42px !important;\n}\n\n.py-9 {\n padding-top: 42px !important;\n padding-bottom: 42px !important;\n}\n\n/* margin */\n.m-10 {\n margin: 48px !important;\n}\n\n.mt-10 {\n margin-top: 48px !important;\n}\n\n.mr-10 {\n margin-right: 48px !important;\n}\n\n.mb-10 {\n margin-bottom: 48px !important;\n}\n\n.ml-10 {\n margin-left: 48px !important;\n}\n\n.mx-10 {\n margin-left: 48px !important;\n margin-right: 48px !important;\n}\n\n.my-10 {\n margin-top: 48px !important;\n margin-bottom: 48px !important;\n}\n\n/* padding */\n.p-10 {\n padding: 48px !important;\n}\n\n.pt-10 {\n padding-top: 48px !important;\n}\n\n.pr-10 {\n padding-right: 48px !important;\n}\n\n.pb-10 {\n padding-bottom: 48px !important;\n}\n\n.pl-10 {\n padding-left: 48px !important;\n}\n\n.px-10 {\n padding-left: 48px !important;\n padding-right: 48px !important;\n}\n\n.py-10 {\n padding-top: 48px !important;\n padding-bottom: 48px !important;\n}\n\n* {\n box-sizing: border-box;\n}\n\n*::-webkit-scrollbar {\n width: 10px;\n}\n\n*::-webkit-scrollbar-track {\n width: 10px;\n background: #0A0A0D;\n cursor: pointer;\n}\n\n*::-webkit-scrollbar-thumb {\n width: 10px;\n background: #4A4A57;\n cursor: default;\n}\n\n*::-webkit-scrollbar-corner {\n background: transparent;\n height: 1px;\n}\n\n*::-webkit-scrollbar-button {\n display: none;\n}\n\n* {\n padding: 0;\n margin: 0;\n}\n\nhtml, body {\n font-family: \"IBM Plex Mono\", monospace;\n font-weight: 400;\n}\n\nbody {\n background-color: #0A0A0D;\n color: #F8F8F8;\n font-size: 15px;\n line-height: 1.45;\n letter-spacing: 0.01em;\n}","/* =========================\n FONT FAMILIES\n========================= */\n\n$font_family_base: \"IBM Plex Mono\", monospace;\n$font_family_code: $font_family_base;\n\n/* =========================\n FONT WEIGHTS\n========================= */\n\n$font_weight_regular: 400;\n$font_weight_medium: 500;\n$font_weight_semibold: 600;\n$font_weight_bold: 700;\n\n/* =========================\n FONT SIZES (scale)\n========================= */\n\n$font_size_xs: 12px;\n$font_size_sm: 13px;\n$font_size_md: 14px;\n$font_size_base: 16px;\n$font_size_lg: 17px;\n$font_size_xl: 20px;\n\n$font_size_h1: 36px;\n$font_size_h2: 28px;\n$font_size_h3: 24px;\n$font_size_h4: 20px;\n$font_size_h5: 18px;\n$font_size_h6: 16px;\n\n/* =========================\n LINE HEIGHTS\n========================= */\n\n$line_height_base: 1;\n$line_height_tight: 1.15;\n$line_height_snug: 1.25;\n$line_height_normal: 1.4;\n$line_height_relaxed: 1.6;\n\n/* =========================\n LETTER SPACING\n========================= */\n\n$letter_spacing_tight: -0.01em;\n$letter_spacing_normal: 0;\n$letter_spacing_wide: 0.04em;\n\n/* =========================\n BASE TYPOGRAPHY\n========================= */\n\nhtml {\n font-size: 100%;\n}\n\nbody {\n font-family: $font_family_base;\n font-size: $font_size_base;\n font-weight: $font_weight_regular;\n line-height: $line_height_relaxed;\n letter-spacing: $letter_spacing_normal;\n}\n\n/* =========================\n HEADINGS\n========================= */\n\nh1, h2, h3, h4, h5, h6 {\n font-family: $font_family_base;\n font-weight: $font_weight_semibold;\n line-height: $line_height_snug;\n margin: 0;\n}\n\nh1 {\n font-size: $font_size_h1;\n letter-spacing: $letter_spacing_tight;\n}\n\nh2 {\n font-size: $font_size_h2;\n}\n\nh3 {\n font-size: $font_size_h3;\n}\n\nh4 {\n font-size: $font_size_h4;\n}\n\nh5 {\n font-size: $font_size_h5;\n}\n\nh6 {\n font-size: $font_size_h6;\n font-weight: $font_weight_medium;\n}\n\n/* =========================\n TEXT VARIANTS\n========================= */\n\n.ui_text,\np {\n font-size: $font_size_base;\n line-height: $line_height_relaxed;\n}\n\n.ui_text_sm {\n font-size: $font_size_sm;\n line-height: $line_height_normal;\n}\n\n.ui_text_lg {\n font-size: $font_size_lg;\n line-height: $line_height_relaxed;\n}\n\n.ui_text_muted {\n font-size: $font_size_sm;\n}\n\n.ui_text_strong,\nstrong {\n font-weight: $font_weight_semibold;\n}\n\n.ui_text_bold {\n font-weight: $font_weight_bold;\n}\n\n.ui_text_italic,\nem {\n font-style: italic;\n}\n\n/* =========================\n CODE / MONO\n========================= */\n\ncode,\npre,\n.ui_code {\n font-family: $font_family_code;\n font-size: $font_size_base;\n line-height: $line_height_normal;\n background-color: $color-dark;\n}\n\npre {\n font-size: $font_size_base;\n line-height: $line_height_relaxed;\n white-space: pre-wrap;\n}\n\n/* =========================\n LINKS\n========================= */\n\na {\n font-weight: $font_weight_medium;\n text-decoration: none;\n}\n\n.ui_link {\n font-size: inherit;\n font-weight: $font_weight_medium;\n}\n\n/* =========================\n LABELS / META\n========================= */\n\n.ui_label {\n font-size: $font_size_sm;\n font-weight: $font_weight_medium;\n line-height: $line_height_normal;\n}\n\n.ui_hint,\n.ui_meta {\n font-size: $font_size_xs;\n line-height: $line_height_normal;\n}\n\n/* =========================\n TABLE TEXT\n========================= */\n\n.ui_table {\n font-size: $font_size_sm;\n line-height: $line_height_normal;\n}\n\n.ui_table th {\n font-weight: $font_weight_semibold;\n}\n\n.ui_table td {\n font-weight: $font_weight_regular;\n}\n\n/* =========================\n LISTS\n========================= */\n\n.ui_list {\n font-size: $font_size_base;\n line-height: $line_height_relaxed;\n}\n\n.ui_list_item {\n font-size: inherit;\n}\n\n/* =========================\n MODALS\n========================= */\n\n.ui_modal_title {\n font-size: $font_size_h4;\n font-weight: $font_weight_semibold;\n}\n\n.ui_modal_body {\n font-size: $font_size_base;\n}\n\n/* =========================\n TOASTS\n========================= */\n\n.ui_toast_title {\n font-size: $font_size_md;\n font-weight: $font_weight_semibold;\n}\n\n.ui_toast_text {\n font-size: $font_size_sm;\n line-height: $line_height_normal;\n}\n\n.text_muted {\n color: $color-text-dark;\n}",".ui_palette {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: $space-sm;\n\n\t.ui_color {\n\t\t.ui_color_box {\n\t\t\twidth: 100px;\n\t\t\theight: 80px;\n\t\t}\n\t}\n}\n\n.bg_primary {\n\tbackground: $color-primary;\n}\n\n.bg_secondary {\n\tbackground: $color-secondary;\n}\n\n.bg_success {\n\tbackground: $color-success;\n}\n\n.bg_accent {\n\tbackground: $color-accent;\n}\n\n.bg_info {\n\tbackground: $color-info;\n}\n\n.bg_warning {\n\tbackground: $color-warning;\n}\n\n.bg_error {\n\tbackground: $color-error;\n}",".btn {\n\tfont-family: $font_family_base;\n\tfont-size: $font_size_lg;\n\tfont-weight: $font_weight_semibold;\n\tline-height: $line_height_base;\n\tletter-spacing: $letter_spacing_wide;\n\tpadding: $space-3 $space-lg;\n\tborder-radius: 0;\n\tborder-width: 2px;\n\tborder-left-width: 6px;\n\tborder-style: solid;\n\tborder-color: $color-primary;\n\ttext-transform: uppercase;\n\tbackground-color: transparent;\n\ttransition-duration: .2s;\n\ttransition-property: background-color, border-color, color;\n\n\t&.with_icon {\n\t\tborder-left-width: 48px;\n\t\tposition: relative;\n\n\t\t.ph {\n\t\t\tposition: absolute;\n\t\t\tcolor: #0a0a0d;\n\t\t\tleft: -48px;\n\t\t\ttop: 0;\n\t\t\tfont-size: 28px;\n\t\t\theight: 100%;\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\twidth: 48px;\n\t\t\tjustify-content: center;\n\t\t\ttransition-duration: .2s;\n\t\t\ttransition-property: color, left;\n\t\t}\n\t}\n\n\t&:hover {\n\t\t&.with_icon {\n\t\t\t.ph {\n\t\t\t\tleft: -28px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn_primary {\n\t\tcolor: $color-primary;\n\t\tborder-color: $color-primary;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-primary;\n\t\t\tcolor: $color-black;\n\t\t}\n\t}\n\n\t&.btn_secondary {\n\t\tcolor: $color-secondary;\n\t\tborder-color: $color-secondary;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-secondary;\n\t\t\tcolor: $color-text-light;\n\t\t\t\n\t\t\t&.with_icon {\n\t\t\t\t.ph {\n\t\t\t\t\tcolor: $color-text-light;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn_accent {\n\t\tcolor: $color-accent;\n\t\tborder-color: $color-accent;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-accent;\n\t\t\tcolor: $color-text-light;\n\n\t\t\t&.with_icon {\n\t\t\t\t.ph {\n\t\t\t\t\tcolor: $color-text-light;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn_danger {\n\t\tcolor: $color-error;\n\t\tborder-color: $color-error;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-error;\n\t\t\tcolor: $color-black;\n\t\t}\n\t}\n\n\t&.btn_warning {\n\t\tcolor: $color-warning;\n\t\tborder-color: $color-warning;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-warning;\n\t\t\tcolor: $color-black;\n\t\t}\n\t}\n\n\t&.btn_success {\n\t\tcolor: $color-success;\n\t\tborder-color: $color-success;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-success;\n\t\t\tcolor: $color-black;\n\t\t}\n\t}\n\n\t&.btn_info {\n\t\tcolor: $color-info;\n\t\tborder-color: $color-info;\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-info;\n\t\t\tcolor: $color-text-light;\n\n\t\t\t&.with_icon {\n\t\t\t\t.ph {\n\t\t\t\t\tcolor: $color-text-light;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&[disabled] {\n\t\tcolor: $color-text-dark;\n\t\tborder-color: $color-dark;\n\t\tbackground-color: $color-dark;\n\n\t\t&.with_icon {\n\t\t\t.ph {\n\t\t\t\tcolor: $color-text-dark;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: $color-dark;\n\t\t\tcolor: $color-text-dark;\n\n\t\t\t&.with_icon {\n\t\t\t\t.ph {\n\t\t\t\t\tcolor: $color-text-dark;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.with_icon {\n\t\t\t.ph {\n\t\t\t\tleft: -28px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.btn_small {\n\t\tfont-size: $font_size_md;\n\t\tfont-weight: $font_weight_medium;\n\t\tpadding: $space-sm $space-sm;\n\t}\n\n\t&.btn_large {\n\t\tfont-size: $font_size_xl;\n\t\tfont-weight: $font_weight_bold;\n\t\tpadding: $space-md $space-xxl;\n\t}\n}\n\n",".ui_form_group {\n\t.ui_label {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tfont-size: $font_size_lg;\n\t\tmax-width: 420px;\n\t\tposition: relative;\n\n\t\t.ph {\n\t\t\tposition: absolute;\n\t\t\tcolor: $color-text-light;\n\t\t\tleft: -0px;\n\t\t\tbottom: 2px;\n\t\t\tfont-size: 28px;\n\t\t\theight: 56px;\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\twidth: 48px;\n\t\t\tjustify-content: center;\n\t\t\ttransition-duration: .2s;\n\t\t\ttransition-property: color, left;\n\t\t}\n\n\t\t.ui_input {\n\t\t\tfont-family: $font_family_base;\n\t\t\tfont-size: $font_size_base;\n\t\t\tfont-weight: $font_weight_medium;\n\t\t\tline-height: $line_height_base;\n\t\t\tletter-spacing: $letter_spacing_wide;\n\t\t\tpadding: $space-3 $space-lg;\n\t\t\tmargin-top: $space-sm;\n\t\t\tborder-radius: 0;\n\t\t\tborder-width: 2px;\n\t\t\tborder-bottom-width: 6px;\n\t\t\tborder-style: solid;\n\t\t\tborder-color: $color-text-light;\n\t\t\tcolor: $color-text-light;\n\t\t\tbackground-color: transparent;\n\t\t\ttransition-duration: .2s;\n\t\t\ttransition-property: background-color, border-color, color;\n\n\t\t\t&:hover {\n\t\t\t\tborder-bottom-color: $color-text-dark;\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\toutline: none;\n\t\t\t\tborder-color: $color-electric-blue;\n\t\t\t}\n\n\t\t\t&::placeholder {\n\t\t\t\tcolor: $color-text-dark;\n\t\t\t}\n\t\t}\n\n\t\ttextarea.ui_input {\n\t\t\theight: 120px;\n\t\t\tline-height: $line_height_snug;\n\t\t\tresize: none;\n\t\t}\n\n\t\t.ph + .ui_input,\n\t\t.ph + .ui_select_wrap .ui_select {\n\t\t\tpadding-left: 42px;\n\t\t}\n\n\t\t.ui_select_wrap {\n\t\t\tmargin-top: $space-sm;\n\t\t}\n\n\t\t.ui_select {\n\t\t width: 100%;\n\t\t height: 56px;\n\t\t margin-top: 0;\n\n\t\t /* убрать нативную стрелку */\n\t\t appearance: none;\n\t\t -webkit-appearance: none;\n\t\t -moz-appearance: none;\n\n\t\t &:focus {\n\t\t outline: none;\n\t\t }\n\n\t\t option {\n\t\t \tcolor: $color-text-light;\n\t\t \tbackground: $color-dark;\n\t\t }\n\t\t}\n\n\t\t.ui_select_wrap::after {\n\t\t content: \"\";\n\t\t position: absolute;\n\t\t right: $space-lg;\n\t\t bottom: 18px;\n\t\t transform: translateY(-50%);\n\n\t\t width: 0;\n\t\t height: 0;\n\t\t border-left: 8px solid transparent;\n\t\t border-right: 8px solid transparent;\n\t\t border-top: 10px solid $color-text-light;\n\n\t\t pointer-events: none; /* чтобы клики шли в select */\n\t\t}\n\t}\n}\n\n.ui_radio {\n\tdisplay: inline-flex;\n\tflex-direction: row;\n\tgap: $space-sm;\n\talign-items: center;\n\n\tinput[type=\"radio\"] {\n\t\tdisplay: none;\n\t}\n\n\t.ui_radio_control {\n\t\tdisplay: inline-block;\n\t\tborder-radius: 100%;\n\t\tborder: 2px solid $color-primary;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tbackground: transparent;\n\t\ttransition-duration: .2s;\n\t\ttransition-property: background, border-color;\n\t}\n\n\t&:hover .ui_radio_control{\n\t\tbackground: $color-grey;\n\t}\n\n\tinput[type=\"radio\"]:checked + .ui_radio_control {\n\t\tbackground: $color-primary;\n\t}\n\n\tinput[type=\"radio\"]:disabled + .ui_radio_control{\n\t\tbackground: $color-grey;\n\t\tborder-color: $color-grey;\n\t}\n\n\t.ui_radio_label {\n\t\tfont-size: $font_size_lg;\n\t}\n}\n\n.ui_checkbox {\n\tdisplay: inline-flex;\n\tflex-direction: row;\n\tgap: $space-sm;\n\talign-items: center;\n\n\tinput[type=\"checkbox\"] {\n\t\tdisplay: none;\n\t}\n\n\t.ui_checkbox_control {\n\t\theight: 16px;\n\t\twidth: 30px;\n\t\tborder: 2px solid $color-primary;\n\t\tposition: relative;\n\t\tbackground: transparent;\n\t\ttransition-duration: .2s;\n\t\ttransition-property: border-color, background;\n\t\tdisplay: block;\n\t}\n\n\t.ui_checkbox_control:before {\n\t\tcontent: \"\";\n\t\tdisplay: block;\n\t\theight: 20px;\n\t\twidth: 20px;\n\t\tbackground: $color-primary;\n\t\tposition: absolute;\n\t\tleft: -6px;\n\t\ttop: -4px;\n\t\ttransition-duration: .2s;\n\t\ttransition-property: left, background;\n\t}\n\n\t&:hover .ui_checkbox_control{\n\t\tbackground: $color-grey;\n\t}\n\n\tinput[type=\"checkbox\"]:checked:not(:disabled) + .ui_checkbox_control {\n\t\tbackground: $color-secondary;\n\t\tborder-color: $color-secondary;\n\t}\n\n\tinput[type=\"checkbox\"]:checked + .ui_checkbox_control:before {\n\t\tleft: 12px;\n\t}\n\n\tinput[type=\"checkbox\"]:disabled + .ui_checkbox_control {\n\t\tborder-color: $color-grey;\n\t}\n\n\tinput[type=\"checkbox\"]:disabled + .ui_checkbox_control:before {\n\t\tbackground: $color-grey;\n\t}\n}","/* =========================\n SPACING UTILITIES\n========================= */\n\n@each $key, $value in $spaces {\n\n /* margin */\n .m-#{$key} { margin: $value !important; }\n .mt-#{$key} { margin-top: $value !important; }\n .mr-#{$key} { margin-right: $value !important; }\n .mb-#{$key} { margin-bottom: $value !important; }\n .ml-#{$key} { margin-left: $value !important; }\n .mx-#{$key} {\n margin-left: $value !important;\n margin-right: $value !important;\n }\n .my-#{$key} {\n margin-top: $value !important;\n margin-bottom: $value !important;\n }\n\n /* padding */\n .p-#{$key} { padding: $value !important; }\n .pt-#{$key} { padding-top: $value !important; }\n .pr-#{$key} { padding-right: $value !important; }\n .pb-#{$key} { padding-bottom: $value !important; }\n .pl-#{$key} { padding-left: $value !important; }\n .px-#{$key} {\n padding-left: $value !important;\n padding-right: $value !important;\n }\n .py-#{$key} {\n padding-top: $value !important;\n padding-bottom: $value !important;\n }\n}\n","@import \"_spacing.scss\";\n@import \"ui_components/_typography.scss\";\n@import \"ui_components/_palette.scss\";\n@import \"ui_components/_buttons.scss\";\n@import \"ui_components/_forms.scss\";\n@import \"ui_components/_lists.scss\";\n@import \"ui_components/_badges.scss\";\n@import \"ui_components/_tables.scss\";\n@import \"ui_components/_toasts.scss\";\n@import \"ui_components/_cards.scss\";\n@import \"ui_components/_modals.scss\";\n@import \"_utils.scss\";\n\n* {\n\tbox-sizing: border-box;\n}\n\n*::-webkit-scrollbar {\n\twidth: 10px;\n}\n\n*::-webkit-scrollbar-track {\n\twidth: 10px;\n\tbackground: $color-black;\n\tcursor: pointer;\n}\n\n*::-webkit-scrollbar-thumb {\n\twidth: 10px;\n\tbackground: $color-grey;\n\tcursor: default;\n}\n\n*::-webkit-scrollbar-corner {\n\tbackground: transparent;\n\theight: 1px;\n}\n\n*::-webkit-scrollbar-button {\n\tdisplay: none;\n}\n\n*::-webkit-scrollbar-track-piece {}\n*::-webkit-resizer {}","@import \"_fonts.scss\";\n@import \"_palette-colors.scss\";\n@import \"_ui.scss\";\n\n* {\n\tpadding: 0;\n\tmargin: 0;\n}\n\nhtml, body {\n font-family: \"IBM Plex Mono\", monospace;\n font-weight: 400;\n}\n\nbody {\n\tbackground-color: $color-black;\n\tcolor: $color-text-light;\n\n\tfont-size: 15px;\n line-height: 1.45;\n letter-spacing: 0.01em;\n}"]} \ No newline at end of file diff --git a/webclient/src/scss/_fonts.scss b/webclient/src/scss/_fonts.scss new file mode 100644 index 0000000..dc9be49 --- /dev/null +++ b/webclient/src/scss/_fonts.scss @@ -0,0 +1,39 @@ +@font-face { + font-family: "IBM Plex Mono"; + src: url("/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf") format("truetype"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "IBM Plex Mono"; + src: url("/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf") format("truetype"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "IBM Plex Mono"; + src: url("/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf") format("truetype"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "IBM Plex Mono"; + src: url("/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf") format("truetype"); + font-weight: 700; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "IBM Plex Mono"; + src: url("/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf") format("truetype"); + font-weight: 400; + font-style: italic; + font-display: swap; +} diff --git a/webclient/src/scss/_palette-colors.scss b/webclient/src/scss/_palette-colors.scss new file mode 100644 index 0000000..f8b2588 --- /dev/null +++ b/webclient/src/scss/_palette-colors.scss @@ -0,0 +1,38 @@ +// ————————————————————————— +// Cyberpunk Mix Palette +// Source palettes: ColorMagic + Cyberpunk vibes +// ————————————————————————— + +// neutrals +$color-black: #0A0A0D; +$color-dark: #1A1A23; +$color-grey: #4A4A57; + +// prime neons +$color-cyan: #00FFCC; +$color-magenta: #FF00CC; +$color-hot-pink: #FF1492; +$color-electric-blue:#00B3FF; + +// secondary accents +$color-purple: #8A2CE2; +$color-indigo: #4B4B9B; +$color-teal: #00FF9F; + +// highlights +$color-neon-yellow: #FFD900; +$color-neon-green: #00FFAA; + +// text tones +$color-text-light: #F8F8F8; +$color-text-medium: #D1D1D1; +$color-text-dark: #AAAEB2; + +// UI state +$color-primary: $color-text-light; +$color-secondary: $color-electric-blue; +$color-accent: $color-magenta; +$color-success: $color-neon-green; +$color-warning: $color-neon-yellow; +$color-error: #FF3C00; +$color-info: $color-purple; \ No newline at end of file diff --git a/webclient/src/scss/_spacing.scss b/webclient/src/scss/_spacing.scss new file mode 100644 index 0000000..49bcfef --- /dev/null +++ b/webclient/src/scss/_spacing.scss @@ -0,0 +1,150 @@ +/* ========================= + SPACING SCALE +========================= */ + +$space-0: 0; +$space-1: 5px; +$space-2: 8px; +$space-3: 12px; +$space-4: 15px; +$space-5: 18px; +$space-6: 22px; +$space-7: 26px; +$space-8: 34px; +$space-9: 42px; +$space-10: 48px; +$space-11: 64px; +$space-12: 80px; + +/* alias для читаемости */ +$space-xs: $space-1; +$space-sm: $space-2; +$space-md: $space-4; +$space-lg: $space-6; +$space-xl: $space-8; +$space-xxl: $space-10; + +/* map — для генерации утилит */ +$spaces: ( + 0: $space-0, + 1: $space-1, + 2: $space-2, + 3: $space-3, + 4: $space-4, + 5: $space-5, + 6: $space-6, + 7: $space-7, + 8: $space-8, + 9: $space-9, + 10: $space-10 +); + +/* ========================= + BASE LAYOUT +========================= */ + +.ui_container { + padding: $space-xl; +} + +.ui_section { + margin-bottom: $space-xxl; +} + +.ui_section_title { + margin-bottom: $space-lg; +} + +.ui_block { + margin-bottom: $space-lg; +} + +.ui_block_title { + margin-bottom: $space-md; +} + +/* ========================= + TEXT & CONTENT +========================= */ + +p, +.ui_text { + margin-bottom: $space-md; +} + +.ui_hint { + margin-top: $space-sm; +} + +/* ========================= + LISTS +========================= */ + +.ui_list { + padding-left: $space-lg; + margin-bottom: $space-md; +} + +.ui_list_item { + margin-bottom: $space-sm; +} + +.ui_list_nested { + margin-top: $space-sm; +} + +/* ========================= + TABLES +========================= */ + +.ui_table { + margin-bottom: $space-lg; +} + +.ui_table_caption { + margin-bottom: $space-sm; +} + +/* ========================= + FORMS +========================= */ + +.ui_form_group { + margin-bottom: $space-md; +} + +.ui_label { + margin-bottom: $space-xs; + display: block; +} + +.ui_input, +.ui_textarea, +.ui_select { + margin-top: $space-xs; +} + +/* ========================= + MODALS +========================= */ + +.ui_modal_header, +.ui_modal_footer { + padding: $space-md $space-lg; +} + +.ui_modal_body { + padding: $space-lg; +} + +/* ========================= + TOASTS +========================= */ + +.ui_toast { + padding: $space-md; +} + +.ui_toast_stack { + gap: $space-sm; +} diff --git a/webclient/src/scss/_ui.scss b/webclient/src/scss/_ui.scss new file mode 100644 index 0000000..eab440e --- /dev/null +++ b/webclient/src/scss/_ui.scss @@ -0,0 +1,44 @@ +@import "_spacing.scss"; +@import "ui_components/_typography.scss"; +@import "ui_components/_palette.scss"; +@import "ui_components/_buttons.scss"; +@import "ui_components/_forms.scss"; +@import "ui_components/_lists.scss"; +@import "ui_components/_badges.scss"; +@import "ui_components/_tables.scss"; +@import "ui_components/_toasts.scss"; +@import "ui_components/_cards.scss"; +@import "ui_components/_modals.scss"; +@import "_utils.scss"; + +* { + box-sizing: border-box; +} + +*::-webkit-scrollbar { + width: 10px; +} + +*::-webkit-scrollbar-track { + width: 10px; + background: $color-black; + cursor: pointer; +} + +*::-webkit-scrollbar-thumb { + width: 10px; + background: $color-grey; + cursor: default; +} + +*::-webkit-scrollbar-corner { + background: transparent; + height: 1px; +} + +*::-webkit-scrollbar-button { + display: none; +} + +*::-webkit-scrollbar-track-piece {} +*::-webkit-resizer {} \ No newline at end of file diff --git a/webclient/src/scss/_utils.scss b/webclient/src/scss/_utils.scss new file mode 100644 index 0000000..3aaa32a --- /dev/null +++ b/webclient/src/scss/_utils.scss @@ -0,0 +1,36 @@ +/* ========================= + SPACING UTILITIES +========================= */ + +@each $key, $value in $spaces { + + /* margin */ + .m-#{$key} { margin: $value !important; } + .mt-#{$key} { margin-top: $value !important; } + .mr-#{$key} { margin-right: $value !important; } + .mb-#{$key} { margin-bottom: $value !important; } + .ml-#{$key} { margin-left: $value !important; } + .mx-#{$key} { + margin-left: $value !important; + margin-right: $value !important; + } + .my-#{$key} { + margin-top: $value !important; + margin-bottom: $value !important; + } + + /* padding */ + .p-#{$key} { padding: $value !important; } + .pt-#{$key} { padding-top: $value !important; } + .pr-#{$key} { padding-right: $value !important; } + .pb-#{$key} { padding-bottom: $value !important; } + .pl-#{$key} { padding-left: $value !important; } + .px-#{$key} { + padding-left: $value !important; + padding-right: $value !important; + } + .py-#{$key} { + padding-top: $value !important; + padding-bottom: $value !important; + } +} diff --git a/webclient/src/scss/fonts.scss b/webclient/src/scss/fonts.scss deleted file mode 100644 index dc9be49..0000000 --- a/webclient/src/scss/fonts.scss +++ /dev/null @@ -1,39 +0,0 @@ -@font-face { - font-family: "IBM Plex Mono"; - src: url("/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf") format("truetype"); - font-weight: 400; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: "IBM Plex Mono"; - src: url("/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf") format("truetype"); - font-weight: 500; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: "IBM Plex Mono"; - src: url("/assets/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf") format("truetype"); - font-weight: 600; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: "IBM Plex Mono"; - src: url("/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf") format("truetype"); - font-weight: 700; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: "IBM Plex Mono"; - src: url("/assets/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf") format("truetype"); - font-weight: 400; - font-style: italic; - font-display: swap; -} diff --git a/webclient/src/scss/main.scss b/webclient/src/scss/main.scss index 0a87c62..ad5e74e 100644 --- a/webclient/src/scss/main.scss +++ b/webclient/src/scss/main.scss @@ -1,5 +1,6 @@ -@import "fonts.scss"; -@import "palette.scss"; +@import "_fonts.scss"; +@import "_palette-colors.scss"; +@import "_ui.scss"; * { padding: 0; diff --git a/webclient/src/scss/palette.scss b/webclient/src/scss/palette.scss deleted file mode 100644 index 4885fdd..0000000 --- a/webclient/src/scss/palette.scss +++ /dev/null @@ -1,35 +0,0 @@ -// ————————————————————————— -// Cyberpunk Mix Palette -// Source palettes: ColorMagic + Cyberpunk vibes -// ————————————————————————— - -// neutrals -$color-black: #0A0A0D; -$color-dark: #1A1A23; -$color-grey: #4A4A57; - -// prime neons -$color-cyan: #00FFCC; -$color-magenta: #FF00CC; -$color-hot-pink: #FF1492; -$color-electric-blue:#00B3FF; - -// secondary accents -$color-purple: #8A2CE2; -$color-indigo: #4B4B9B; -$color-teal: #00FF9F; - -// highlights -$color-neon-yellow: #FFD900; -$color-neon-green: #00FFAA; - -// UI state -$color-success: #00FFAA; -$color-warning: #FFD900; -$color-error: #FF3C00; -$color-info: #00CCFF; - -// text tones -$color-text-light: #F8F8F8; -$color-text-medium: #D1D1D1; -$color-text-dark: #AAAEB2; diff --git a/webclient/src/scss/ui_components/_badges.scss b/webclient/src/scss/ui_components/_badges.scss new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/webclient/src/scss/ui_components/_badges.scss diff --git a/webclient/src/scss/ui_components/_buttons.scss b/webclient/src/scss/ui_components/_buttons.scss new file mode 100644 index 0000000..4407752 --- /dev/null +++ b/webclient/src/scss/ui_components/_buttons.scss @@ -0,0 +1,175 @@ +.btn { + font-family: $font_family_base; + font-size: $font_size_lg; + font-weight: $font_weight_semibold; + line-height: $line_height_base; + letter-spacing: $letter_spacing_wide; + padding: $space-3 $space-lg; + border-radius: 0; + border-width: 2px; + border-left-width: 6px; + border-style: solid; + border-color: $color-primary; + text-transform: uppercase; + background-color: transparent; + transition-duration: .2s; + transition-property: background-color, border-color, color; + + &.with_icon { + border-left-width: 48px; + position: relative; + + .ph { + position: absolute; + color: #0a0a0d; + left: -48px; + top: 0; + font-size: 28px; + height: 100%; + display: inline-flex; + align-items: center; + width: 48px; + justify-content: center; + transition-duration: .2s; + transition-property: color, left; + } + } + + &:hover { + &.with_icon { + .ph { + left: -28px; + } + } + } + + &.btn_primary { + color: $color-primary; + border-color: $color-primary; + + &:hover { + background-color: $color-primary; + color: $color-black; + } + } + + &.btn_secondary { + color: $color-secondary; + border-color: $color-secondary; + + &:hover { + background-color: $color-secondary; + color: $color-text-light; + + &.with_icon { + .ph { + color: $color-text-light; + } + } + } + } + + &.btn_accent { + color: $color-accent; + border-color: $color-accent; + + &:hover { + background-color: $color-accent; + color: $color-text-light; + + &.with_icon { + .ph { + color: $color-text-light; + } + } + } + } + + &.btn_danger { + color: $color-error; + border-color: $color-error; + + &:hover { + background-color: $color-error; + color: $color-black; + } + } + + &.btn_warning { + color: $color-warning; + border-color: $color-warning; + + &:hover { + background-color: $color-warning; + color: $color-black; + } + } + + &.btn_success { + color: $color-success; + border-color: $color-success; + + &:hover { + background-color: $color-success; + color: $color-black; + } + } + + &.btn_info { + color: $color-info; + border-color: $color-info; + + &:hover { + background-color: $color-info; + color: $color-text-light; + + &.with_icon { + .ph { + color: $color-text-light; + } + } + } + } + + &[disabled] { + color: $color-text-dark; + border-color: $color-dark; + background-color: $color-dark; + + &.with_icon { + .ph { + color: $color-text-dark; + } + } + + &:hover { + background-color: $color-dark; + color: $color-text-dark; + + &.with_icon { + .ph { + color: $color-text-dark; + } + } + } + + &.with_icon { + .ph { + left: -28px; + } + } + } + + &.btn_small { + font-size: $font_size_md; + font-weight: $font_weight_medium; + padding: $space-sm $space-sm; + } + + &.btn_large { + font-size: $font_size_xl; + font-weight: $font_weight_bold; + padding: $space-md $space-xxl; + } +} + diff --git a/webclient/src/scss/ui_components/_cards.scss b/webclient/src/scss/ui_components/_cards.scss new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/webclient/src/scss/ui_components/_cards.scss diff --git a/webclient/src/scss/ui_components/_forms.scss b/webclient/src/scss/ui_components/_forms.scss new file mode 100644 index 0000000..a861a62 --- /dev/null +++ b/webclient/src/scss/ui_components/_forms.scss @@ -0,0 +1,202 @@ +.ui_form_group { + .ui_label { + display: flex; + flex-direction: column; + font-size: $font_size_lg; + max-width: 420px; + position: relative; + + .ph { + position: absolute; + color: $color-text-light; + left: -0px; + bottom: 2px; + font-size: 28px; + height: 56px; + display: inline-flex; + align-items: center; + width: 48px; + justify-content: center; + transition-duration: .2s; + transition-property: color, left; + } + + .ui_input { + font-family: $font_family_base; + font-size: $font_size_base; + font-weight: $font_weight_medium; + line-height: $line_height_base; + letter-spacing: $letter_spacing_wide; + padding: $space-3 $space-lg; + margin-top: $space-sm; + border-radius: 0; + border-width: 2px; + border-bottom-width: 6px; + border-style: solid; + border-color: $color-text-light; + color: $color-text-light; + background-color: transparent; + transition-duration: .2s; + transition-property: background-color, border-color, color; + + &:hover { + border-bottom-color: $color-text-dark; + } + + &:focus { + outline: none; + border-color: $color-electric-blue; + } + + &::placeholder { + color: $color-text-dark; + } + } + + textarea.ui_input { + height: 120px; + line-height: $line_height_snug; + resize: none; + } + + .ph + .ui_input, + .ph + .ui_select_wrap .ui_select { + padding-left: 42px; + } + + .ui_select_wrap { + margin-top: $space-sm; + } + + .ui_select { + width: 100%; + height: 56px; + margin-top: 0; + + /* убрать нативную стрелку */ + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + + &:focus { + outline: none; + } + + option { + color: $color-text-light; + background: $color-dark; + } + } + + .ui_select_wrap::after { + content: ""; + position: absolute; + right: $space-lg; + bottom: 18px; + transform: translateY(-50%); + + width: 0; + height: 0; + border-left: 8px solid transparent; + border-right: 8px solid transparent; + border-top: 10px solid $color-text-light; + + pointer-events: none; /* чтобы клики шли в select */ + } + } +} + +.ui_radio { + display: inline-flex; + flex-direction: row; + gap: $space-sm; + align-items: center; + + input[type="radio"] { + display: none; + } + + .ui_radio_control { + display: inline-block; + border-radius: 100%; + border: 2px solid $color-primary; + width: 20px; + height: 20px; + background: transparent; + transition-duration: .2s; + transition-property: background, border-color; + } + + &:hover .ui_radio_control{ + background: $color-grey; + } + + input[type="radio"]:checked + .ui_radio_control { + background: $color-primary; + } + + input[type="radio"]:disabled + .ui_radio_control{ + background: $color-grey; + border-color: $color-grey; + } + + .ui_radio_label { + font-size: $font_size_lg; + } +} + +.ui_checkbox { + display: inline-flex; + flex-direction: row; + gap: $space-sm; + align-items: center; + + input[type="checkbox"] { + display: none; + } + + .ui_checkbox_control { + height: 16px; + width: 30px; + border: 2px solid $color-primary; + position: relative; + background: transparent; + transition-duration: .2s; + transition-property: border-color, background; + display: block; + } + + .ui_checkbox_control:before { + content: ""; + display: block; + height: 20px; + width: 20px; + background: $color-primary; + position: absolute; + left: -6px; + top: -4px; + transition-duration: .2s; + transition-property: left, background; + } + + &:hover .ui_checkbox_control{ + background: $color-grey; + } + + input[type="checkbox"]:checked:not(:disabled) + .ui_checkbox_control { + background: $color-secondary; + border-color: $color-secondary; + } + + input[type="checkbox"]:checked + .ui_checkbox_control:before { + left: 12px; + } + + input[type="checkbox"]:disabled + .ui_checkbox_control { + border-color: $color-grey; + } + + input[type="checkbox"]:disabled + .ui_checkbox_control:before { + background: $color-grey; + } +} \ No newline at end of file diff --git a/webclient/src/scss/ui_components/_lists.scss b/webclient/src/scss/ui_components/_lists.scss new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/webclient/src/scss/ui_components/_lists.scss diff --git a/webclient/src/scss/ui_components/_modals.scss b/webclient/src/scss/ui_components/_modals.scss new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/webclient/src/scss/ui_components/_modals.scss diff --git a/webclient/src/scss/ui_components/_palette.scss b/webclient/src/scss/ui_components/_palette.scss new file mode 100644 index 0000000..affd778 --- /dev/null +++ b/webclient/src/scss/ui_components/_palette.scss @@ -0,0 +1,40 @@ +.ui_palette { + display: flex; + flex-direction: row; + gap: $space-sm; + + .ui_color { + .ui_color_box { + width: 100px; + height: 80px; + } + } +} + +.bg_primary { + background: $color-primary; +} + +.bg_secondary { + background: $color-secondary; +} + +.bg_success { + background: $color-success; +} + +.bg_accent { + background: $color-accent; +} + +.bg_info { + background: $color-info; +} + +.bg_warning { + background: $color-warning; +} + +.bg_error { + background: $color-error; +} \ No newline at end of file diff --git a/webclient/src/scss/ui_components/_tables.scss b/webclient/src/scss/ui_components/_tables.scss new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/webclient/src/scss/ui_components/_tables.scss diff --git a/webclient/src/scss/ui_components/_toasts.scss b/webclient/src/scss/ui_components/_toasts.scss new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/webclient/src/scss/ui_components/_toasts.scss diff --git a/webclient/src/scss/ui_components/_typography.scss b/webclient/src/scss/ui_components/_typography.scss new file mode 100644 index 0000000..00b9ab5 --- /dev/null +++ b/webclient/src/scss/ui_components/_typography.scss @@ -0,0 +1,252 @@ +/* ========================= + FONT FAMILIES +========================= */ + +$font_family_base: "IBM Plex Mono", monospace; +$font_family_code: $font_family_base; + +/* ========================= + FONT WEIGHTS +========================= */ + +$font_weight_regular: 400; +$font_weight_medium: 500; +$font_weight_semibold: 600; +$font_weight_bold: 700; + +/* ========================= + FONT SIZES (scale) +========================= */ + +$font_size_xs: 12px; +$font_size_sm: 13px; +$font_size_md: 14px; +$font_size_base: 16px; +$font_size_lg: 17px; +$font_size_xl: 20px; + +$font_size_h1: 36px; +$font_size_h2: 28px; +$font_size_h3: 24px; +$font_size_h4: 20px; +$font_size_h5: 18px; +$font_size_h6: 16px; + +/* ========================= + LINE HEIGHTS +========================= */ + +$line_height_base: 1; +$line_height_tight: 1.15; +$line_height_snug: 1.25; +$line_height_normal: 1.4; +$line_height_relaxed: 1.6; + +/* ========================= + LETTER SPACING +========================= */ + +$letter_spacing_tight: -0.01em; +$letter_spacing_normal: 0; +$letter_spacing_wide: 0.04em; + +/* ========================= + BASE TYPOGRAPHY +========================= */ + +html { + font-size: 100%; +} + +body { + font-family: $font_family_base; + font-size: $font_size_base; + font-weight: $font_weight_regular; + line-height: $line_height_relaxed; + letter-spacing: $letter_spacing_normal; +} + +/* ========================= + HEADINGS +========================= */ + +h1, h2, h3, h4, h5, h6 { + font-family: $font_family_base; + font-weight: $font_weight_semibold; + line-height: $line_height_snug; + margin: 0; +} + +h1 { + font-size: $font_size_h1; + letter-spacing: $letter_spacing_tight; +} + +h2 { + font-size: $font_size_h2; +} + +h3 { + font-size: $font_size_h3; +} + +h4 { + font-size: $font_size_h4; +} + +h5 { + font-size: $font_size_h5; +} + +h6 { + font-size: $font_size_h6; + font-weight: $font_weight_medium; +} + +/* ========================= + TEXT VARIANTS +========================= */ + +.ui_text, +p { + font-size: $font_size_base; + line-height: $line_height_relaxed; +} + +.ui_text_sm { + font-size: $font_size_sm; + line-height: $line_height_normal; +} + +.ui_text_lg { + font-size: $font_size_lg; + line-height: $line_height_relaxed; +} + +.ui_text_muted { + font-size: $font_size_sm; +} + +.ui_text_strong, +strong { + font-weight: $font_weight_semibold; +} + +.ui_text_bold { + font-weight: $font_weight_bold; +} + +.ui_text_italic, +em { + font-style: italic; +} + +/* ========================= + CODE / MONO +========================= */ + +code, +pre, +.ui_code { + font-family: $font_family_code; + font-size: $font_size_base; + line-height: $line_height_normal; + background-color: $color-dark; +} + +pre { + font-size: $font_size_base; + line-height: $line_height_relaxed; + white-space: pre-wrap; +} + +/* ========================= + LINKS +========================= */ + +a { + font-weight: $font_weight_medium; + text-decoration: none; +} + +.ui_link { + font-size: inherit; + font-weight: $font_weight_medium; +} + +/* ========================= + LABELS / META +========================= */ + +.ui_label { + font-size: $font_size_sm; + font-weight: $font_weight_medium; + line-height: $line_height_normal; +} + +.ui_hint, +.ui_meta { + font-size: $font_size_xs; + line-height: $line_height_normal; +} + +/* ========================= + TABLE TEXT +========================= */ + +.ui_table { + font-size: $font_size_sm; + line-height: $line_height_normal; +} + +.ui_table th { + font-weight: $font_weight_semibold; +} + +.ui_table td { + font-weight: $font_weight_regular; +} + +/* ========================= + LISTS +========================= */ + +.ui_list { + font-size: $font_size_base; + line-height: $line_height_relaxed; +} + +.ui_list_item { + font-size: inherit; +} + +/* ========================= + MODALS +========================= */ + +.ui_modal_title { + font-size: $font_size_h4; + font-weight: $font_weight_semibold; +} + +.ui_modal_body { + font-size: $font_size_base; +} + +/* ========================= + TOASTS +========================= */ + +.ui_toast_title { + font-size: $font_size_md; + font-weight: $font_weight_semibold; +} + +.ui_toast_text { + font-size: $font_size_sm; + line-height: $line_height_normal; +} + +.text_muted { + color: $color-text-dark; +} \ No newline at end of file diff --git a/webclient/ui.php b/webclient/ui.php index 000eba6..a4b1587 100644 --- a/webclient/ui.php +++ b/webclient/ui.php @@ -1,33 +1,34 @@ - - UI Kit - + + UI Kit + - + + -
-

UI Kit

-

Набор базовых элементов интерфейса

-
+
-
+
+

UI Kit

+

Набор базовых элементов интерфейса

+
- - - - - - - - - - + + + + + + + + + + -
+
diff --git a/webclient/ui_components/buttons.php b/webclient/ui_components/buttons.php index 9265d56..98eb3dd 100644 --- a/webclient/ui_components/buttons.php +++ b/webclient/ui_components/buttons.php @@ -3,9 +3,13 @@
- - - + + + + + + +
@@ -16,5 +20,6 @@
+
diff --git a/webclient/ui_components/forms.php b/webclient/ui_components/forms.php index 5f25513..6bc9a78 100644 --- a/webclient/ui_components/forms.php +++ b/webclient/ui_components/forms.php @@ -1,39 +1,104 @@
-

Forms

+

Forms

-
- -
+
+ +
-
- -
+
+ +
-
- -
+
+ +
-
- +
+ +
- -
+
+ +
+ +
+ +
+ +
+ + + + + + + +
+ +
+ + + + + +
diff --git a/webclient/ui_components/palette.php b/webclient/ui_components/palette.php index 14f435e..aaacee8 100644 --- a/webclient/ui_components/palette.php +++ b/webclient/ui_components/palette.php @@ -18,6 +18,21 @@
+
+ Info +
+ +
+
+ Success +
+ +
+
+ Warning +
+ +
Error
diff --git a/webclient/ui_components/typography.php b/webclient/ui_components/typography.php index 8cebc42..f81037f 100644 --- a/webclient/ui_components/typography.php +++ b/webclient/ui_components/typography.php @@ -21,7 +21,7 @@
- + console.log("IBM Plex Mono");