diff --git a/css/app.main.css b/css/app.main.css index f959c0c7..7a2ada46 100644 --- a/css/app.main.css +++ b/css/app.main.css @@ -1,391 +1,520 @@ ::-webkit-scrollbar { - width: 8.5px; - background-color: #36363E + width: 8.5px; + background-color: #36363e; } ::-webkit-scrollbar-thumb { - background-color: #7C7C84; - border-radius: 8.75px + background-color: #7c7c84; + border-radius: 8.75px; } ::-webkit-scrollbar-thumb:hover { - background-color: #909098 + background-color: #909098; } p { - color: #fff + color: #fff; } h1 { - font-size: 50px; - margin: 0; - color: #fff + font-size: 50px; + margin: 0; + color: #fff; } h5 { - display: block; - font-size: 0.83em; - margin: 1.67em 0; - font-weight: 700; - color: #fff + display: block; + font-size: 0.83em; + margin: 1.67em 0; + font-weight: 700; + color: #fff; } a { - color: #007bff; - text-decoration: none; - background-color: transparent + color: #007bff; + text-decoration: none; + background-color: transparent; } a:hover { - color: #0056b3; - text-decoration: underline + color: #0056b3; + text-decoration: underline; } a:not([href]) { - color: inherit; - text-decoration: none + color: inherit; + text-decoration: none; } a:not([href]):hover { - color: inherit; - text-decoration: none + color: inherit; + text-decoration: none; } -.page-footer-section a,.page-footer-section p { - color: #B2B4BF +.page-footer-section a, +.page-footer-section p { + color: #b2b4bf; } p { - margin-top: 0; - margin-bottom: 1rem + margin-top: 0; + margin-bottom: 1rem; } p { - display: block; - margin-block-start: 1em; - margin-block-end: 1em; - margin-inline-start: 0; - margin-inline-end: 0 + display: block; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0; + margin-inline-end: 0; } -.mb-3,.my-3 { - margin-bottom: 1rem!important +.mb-3, +.my-3 { + margin-bottom: 1rem !important; } -.h5,h5 { - font-size: 1.3125rem +.h5, +h5 { + font-size: 1.3125rem; } -.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 { - line-height: 1.25 +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +h1, +h2, +h3, +h4, +h5, +h6 { + line-height: 1.25; } -.h5,h5 { - font-size: 1.25rem +.h5, +h5 { + font-size: 1.25rem; } -.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 { - margin-bottom: 0.5rem; - font-weight: 500; - line-height: 1.2; - color: #fff +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +h1, +h2, +h3, +h4, +h5, +h6 { + margin-bottom: 0.5rem; + font-weight: 500; + line-height: 1.2; + color: #fff; } .page-footer-section { - position: relative; - padding-top: 100px; - padding-bottom: 20px; - background-color: #F0EEF5 + position: relative; + padding-top: 100px; + padding-bottom: 20px; + background-color: #f0eef5; } .page-footer-section.bg-dark .caption { - color: rgba(255,255,255,.6) + color: rgba(255, 255, 255, 0.6); } .page-footer-section.bg-dark hr { - border-color: #4d4853 + border-color: #4d4853; } .menu-link { - position: relative; - padding-left: 0; - list-style: none + position: relative; + padding-left: 0; + list-style: none; } .menu-link li { - display: block; - margin: 10px 0 + display: block; + margin: 10px 0; } .mea:hover { - color: #526bf5; - text-decoration: none + color: #526bf5; + text-decoration: none; } -.page-footer-section a,.page-footer-section p { - color: #B2B4BF +.page-footer-section a, +.page-footer-section p { + color: #b2b4bf; } .page-footer-section a:hover { - color: #526bf5; - text-decoration: none + color: #526bf5; + text-decoration: none; } .client-img > img { - width: auto; - max-width: 100%; - height: auto; - max-height: 100px + width: auto; + max-width: 100%; + height: auto; + max-height: 100px; } .row { - display: flex; - flex-wrap: wrap; - margin-right: -15px; - margin-left: -15px + display: flex; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px; } -.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto { - position: relative; - width: 100%; - padding-right: 15px; - padding-left: 15px +.col, +.col-1, +.col-10, +.col-11, +.col-12, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9, +.col-auto, +.col-lg, +.col-lg-1, +.col-lg-10, +.col-lg-11, +.col-lg-12, +.col-lg-2, +.col-lg-3, +.col-lg-4, +.col-lg-5, +.col-lg-6, +.col-lg-7, +.col-lg-8, +.col-lg-9, +.col-lg-auto, +.col-md, +.col-md-1, +.col-md-10, +.col-md-11, +.col-md-12, +.col-md-2, +.col-md-3, +.col-md-4, +.col-md-5, +.col-md-6, +.col-md-7, +.col-md-8, +.col-md-9, +.col-md-auto, +.col-sm, +.col-sm-1, +.col-sm-10, +.col-sm-11, +.col-sm-12, +.col-sm-2, +.col-sm-3, +.col-sm-4, +.col-sm-5, +.col-sm-6, +.col-sm-7, +.col-sm-8, +.col-sm-9, +.col-sm-auto, +.col-xl, +.col-xl-1, +.col-xl-10, +.col-xl-11, +.col-xl-12, +.col-xl-2, +.col-xl-3, +.col-xl-4, +.col-xl-5, +.col-xl-6, +.col-xl-7, +.col-xl-8, +.col-xl-9, +.col-xl-auto { + position: relative; + width: 100%; + padding-right: 15px; + padding-left: 15px; } .fa-icon { - align-items: center; - background-color: transparent; - border: 0; - display: inline-flex; - justify-content: center; - margin: 0; - padding: 0 0.1em; - position: relative; - user-select: none; - vertical-align: text-bottom; - -webkit-user-select: none + align-items: center; + background-color: transparent; + border: 0; + display: inline-flex; + justify-content: center; + margin: 0; + padding: 0 0.1em; + position: relative; + user-select: none; + vertical-align: text-bottom; + -webkit-user-select: none; } .fa-icon > * { - pointer-events: none + pointer-events: none; } -.fa-icon.disabled,.fa-icon[disabled] { - color: var(--button-disabled-ink); - fill: var(--button-disabled-ink); - filter: var(--button-disabled-filter); - stroke: var(--button-disabled-ink); - pointer-events: none +.fa-icon.disabled, +.fa-icon[disabled] { + color: var(--button-disabled-ink); + fill: var(--button-disabled-ink); + filter: var(--button-disabled-filter); + stroke: var(--button-disabled-ink); + pointer-events: none; } -.fa-icon > .fa-icon-badge,.fa-icon.disabled > .fa-icon-badge { - visibility: hidden +.fa-icon > .fa-icon-badge, +.fa-icon.disabled > .fa-icon-badge { + visibility: hidden; } .fa-icon.fa-icon-badged > .fa-icon-badge { - bottom: -20%; - display: inline-block; - font: 60% sans-serif; - left: calc(100% - 0.2em); - position: absolute; - visibility: visible + bottom: -20%; + display: inline-block; + font: 60% sans-serif; + left: calc(100% - 0.2em); + position: absolute; + visibility: visible; } .fa-icon.fa-icon-hflipped > svg { - transform: scale(-1, 1) + transform: scale(-1, 1); } .fa-icon.fa-icon-vflipped > svg { - transform: scale(1, -1) + transform: scale(1, -1); } .fa-icon > svg { - height: 1em; - overflow: visible; - width: 1em + height: 1em; + overflow: visible; + width: 1em; } .fa-icon > .fa-icon_bar-chart { - width: calc(1em * 2048 / 1792) + width: calc(1em * 2048 / 1792); } -.fa-icon > .fa-icon_cloud-download,.fa-icon > .fa-icon_cloud-upload,.fa-icon > .fa-icon_cogs,.fa-icon > .fa-icon_eraser,.fa-icon > .fa-icon_film { - width: calc(1em * 1920 / 1792) +.fa-icon > .fa-icon_cloud-download, +.fa-icon > .fa-icon_cloud-upload, +.fa-icon > .fa-icon_cogs, +.fa-icon > .fa-icon_eraser, +.fa-icon > .fa-icon_film { + width: calc(1em * 1920 / 1792); } .fa-icon > .fa-icon_code { - width: calc(1em * 1830 / 1792) + width: calc(1em * 1830 / 1792); } .fa-icon > .fa-icon_exclamation-triangle { - width: calc(1em * 1794 / 1792) + width: calc(1em * 1794 / 1792); } -.fa-icon > .fa-icon_clipboard,.fa-icon > .fa-icon_comment-alt,.fa-icon > .fa-icon_external-link,.fa-icon > .fa-icon_eye-dropper,.fa-icon > .fa-icon_eye-open,.fa-icon > .fa-icon_eye-slash,.fa-icon > .fa-icon_files-o,.fa-icon > .fa-icon_list-alt { - width: calc(1em * 1792 / 1792) +.fa-icon > .fa-icon_clipboard, +.fa-icon > .fa-icon_comment-alt, +.fa-icon > .fa-icon_external-link, +.fa-icon > .fa-icon_eye-dropper, +.fa-icon > .fa-icon_eye-open, +.fa-icon > .fa-icon_eye-slash, +.fa-icon > .fa-icon_files-o, +.fa-icon > .fa-icon_list-alt { + width: calc(1em * 1792 / 1792); } -.fa-icon > .fa-icon_download-alt,.fa-icon > .fa-icon_font,.fa-icon > .fa-icon_search,.fa-icon > .fa-icon_spinner,.fa-icon > .fa-icon_unlink,.fa-icon > .fa-icon_upload-alt,.fa-icon > .fa-icon_zoom-in,.fa-icon > .fa-icon_zoom-out { - width: calc(1em * 1664 / 1792) +.fa-icon > .fa-icon_download-alt, +.fa-icon > .fa-icon_font, +.fa-icon > .fa-icon_search, +.fa-icon > .fa-icon_spinner, +.fa-icon > .fa-icon_unlink, +.fa-icon > .fa-icon_upload-alt, +.fa-icon > .fa-icon_zoom-in, +.fa-icon > .fa-icon_zoom-out { + width: calc(1em * 1664 / 1792); } .fa-icon > .fa-icon_home { - width: calc(1em * 1612 / 1792) + width: calc(1em * 1612 / 1792); } .fa-icon > .fa-icon_check { - width: calc(1em * 1550 / 1792) + width: calc(1em * 1550 / 1792); } -.fa-icon > .fa-icon_clock-o,.fa-icon > .fa-icon_cog,.fa-icon > .fa-icon_floppy-o,.fa-icon > .fa-icon_info-circle,.fa-icon > .fa-icon_pause-circle-o,.fa-icon > .fa-icon_play-circle-o,.fa-icon > .fa-icon_power-off,.fa-icon > .fa-icon_question-circle,.fa-icon > .fa-icon_refresh,.fa-icon > .fa-icon_save,.fa-icon > .fa-icon_sliders,.fa-icon > .fa-icon_undo { - width: calc(1em * 1536 / 1792) +.fa-icon > .fa-icon_clock-o, +.fa-icon > .fa-icon_cog, +.fa-icon > .fa-icon_floppy-o, +.fa-icon > .fa-icon_info-circle, +.fa-icon > .fa-icon_pause-circle-o, +.fa-icon > .fa-icon_play-circle-o, +.fa-icon > .fa-icon_power-off, +.fa-icon > .fa-icon_question-circle, +.fa-icon > .fa-icon_refresh, +.fa-icon > .fa-icon_save, +.fa-icon > .fa-icon_sliders, +.fa-icon > .fa-icon_undo { + width: calc(1em * 1536 / 1792); } .fa-icon > .fa-icon_arrow-right { - width: calc(1em * 1472 / 1792) + width: calc(1em * 1472 / 1792); } .fa-icon > .fa-icon_filter { - width: calc(1em * 1410 / 1792) + width: calc(1em * 1410 / 1792); } -.fa-icon > .fa-icon_plus,.fa-icon > .fa-icon_trash-o { - width: calc(1em * 1408 / 1792) +.fa-icon > .fa-icon_plus, +.fa-icon > .fa-icon_trash-o { + width: calc(1em * 1408 / 1792); } .fa-icon > .fa-icon_times { - width: calc(1em * 1188 / 1792) + width: calc(1em * 1188 / 1792); } -.fa-icon > .fa-icon_angle-up,.fa-icon > .fa-icon_double-angle-up,.fa-icon > .fa-icon_lock,.fa-icon > .fa-icon_unlock-alt { - width: calc(1em * 1152 / 1792) +.fa-icon > .fa-icon_angle-up, +.fa-icon > .fa-icon_double-angle-up, +.fa-icon > .fa-icon_lock, +.fa-icon > .fa-icon_unlock-alt { + width: calc(1em * 1152 / 1792); } .fa-icon > .fa-icon_double-angle-left { - width: calc(1em * 966 / 1792) + width: calc(1em * 966 / 1792); } .fa-icon > .fa-icon_bolt { - width: calc(1em * 896 / 1792) + width: calc(1em * 896 / 1792); } body { - background: #000 + background: #000; } nav { - font-family: Roboto; - display: flex; - justify-content: space-between; - height: 4em; + font-family: Roboto; + display: flex; + justify-content: space-between; + height: 4em; } nav a { - color: #fff; - text-decoration: none; - font-weight: 700 + color: #fff; + text-decoration: none; + font-weight: 700; } nav a span { - color: red + color: red; } nav .left { - display: flex; - justify-content: flex-start; - align-items: center; - padding-left: 1em + display: flex; + justify-content: flex-start; + align-items: center; + padding-left: 1em; } nav .left a { - margin-left: 30px + margin-left: 30px; } nav .left a i { - padding-right: 4px + padding-right: 4px; } nav .middle { - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; } nav .middle .search-bar { - display: flex; - transform: translateY(1em); - background: #222; - border: 1px solid #444; - width: 320px; - height: 30px + display: flex; + transform: translateY(1em); + background: #222; + border: 1px solid #444; + width: 320px; + height: 30px; } nav .middle button { - display: flex; - transform: translate(22em, -1.25em); - background: #454545; - color: #999; - padding: 10px 10px; - border: 1px; - border-radius: 50%; + display: flex; + transform: translate(22em, -1.25em); + background: #454545; + color: #999; + padding: 10px 10px; + border: 1px; + border-radius: 50%; } nav .middle input { - background:#454545; - color:#999; - padding:2px 25px + background: #454545; + color: #999; + padding: 2px 25px; } .search { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; } .search .search-bar { - display: flex; - transform: translateY(1.5em); - background: #222; - border: 1px solid #444; - width: 320px; - height: 30px - + display: flex; + transform: translateY(1.5em); + background: #222; + border: 1px solid #444; + width: 320px; + height: 30px; } .search button { - display: flex; - transform: translate(11.5em, -0.75em); - background: #454545; - color: #999; - padding: 10px 10px; - border: 1px; - border-radius: 50%; + display: flex; + transform: translate(11.5em, -0.75em); + background: #454545; + color: #999; + padding: 10px 10px; + border: 1px; + border-radius: 50%; } .search input { - background: #454545; - color: #999; - padding: 2px 25px + background: #454545; + color: #999; + padding: 2px 25px; } nav .right { - display: flex; - align-items: center; - padding-right: 1.5em; + display: flex; + align-items: center; + padding-right: 1.5em; } nav .right a { - padding-left: 1.5em + padding-left: 1.5em; } nav .right img { - height: 30px; - width: 30px; - border-radius: 50% + height: 30px; + width: 30px; + border-radius: 50%; } - @font-face { font-family: "PokeTube Flex"; src: url("https://p.poketube.fun/https://cdn.glitch.global/43b6691a-c8db-41d4-921c-8cf6aa0d9108/robotoflex.ttf?v=1668343428681"); @@ -406,10 +535,12 @@ nav .right img { font-weight: 600; } -.btn.btn-success { - transform: translate(21em, -1.25em) !important; +@media screen and (min-width: 1000px) { + .btn.btn-success { + transform: translate(21em, -1.25em) !important; + } } -nav .middle .search-bar { -border-radius: 2em !important; -} \ No newline at end of file +nav .middle .search-bar { + border-radius: 2em !important; +}