/* * style.less * */ @font-face { font-family: Montserrat; src: url("/otf/Montserrat/Montserrat-Regular.otf") format("opentype"); } @font-face { font-family: Montserrat; font-weight: bold; src: url("/otf/Montserrat/Montserrat-Bold.otf") format("opentype"); } @font-face { font-family: Montserrat; font-style: italic; font-weight: bold; src: url("/otf/Montserrat/Montserrat-BoldItalic.otf") format("opentype"); } @font-face { font-family: "Open Sans"; src: url("/ttf/OpenSans/OpenSans-Regular.ttf") format("truetype"); } @font-face { font-family: "Open Sans"; font-weight: bold; src: url("/ttf/OpenSans/OpenSans-Bold.ttf") format("truetype"); } @font-face { font-family: "Open Sans"; font-style: italic; font-weight: bold; src: url("/ttf/OpenSans/OpenSans-BoldItalic.ttf") format("truetype"); } @font-face { font-family: "Playfair Display"; src: url("/ttf/Playfair-Display/PlayfairDisplay-Regular.ttf") format("truetype"); } @font-face { font-family: "Playfair Display"; font-weight: bold; src: url("/ttf/Playfair-Display/PlayfairDisplay-Bold.ttf") format("truetype"); } @font-face { font-family: "Playfair Display"; font-style: italic; font-weight: bold; src: url("/ttf/Playfair-Display/PlayfairDisplay-BoldItalic.ttf") format("truetype"); } /* * main.less * */ html, body.hydra { font-family: "OpenSans", sans-serif; } body.hydra { padding: 70px 0 0 0; margin: 0; font-size: 1em; background-color: #F7F7F7; } body.hydra.hydra-dark { background-color: #272B30; } @media (max-width: 480px) { body.hydra { font-size: 18px; } } body.hydra .no-select { user-select: none; } body.hydra a { word-wrap: break-word; } body.hydra a.hydra-truncated-link { display: inline-block; word-wrap: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } body.hydra a.undecorated { text-decoration: none; } body.hydra .hidden { display: none !important; } .col-header-tab-btn { font-size: 14px; color: #000; padding: 10px 15px; background-color: #eee; border-radius: 8px; margin-right: 5px; text-decoration: none; } .col-header-tab-btn:hover { text-decoration: none; background-color: #ddd; color: #000; } .col-header-tab-btn.active { text-decoration: none; background-color: #ddd; color: #000; font-weight: 600; } .card { border-radius: 8px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; } /* * img.less * */ .hydra img.profile-navbar { height: 32px; } .hydra img.appicon { display: block; margin: 0; padding: 0; } .hydra img.appicon.sm { width: 32px; height: 32px; } .hydra img.appicon.md { width: 64px; height: 64px; } .hydra img.appicon.lg { width: 512px; height: 512px; } .hydra img.responsive { display: block; width: 100%; } .hydra img.btn-icon { height: 1em; } .hydra img.user-avatar { display: block; width: 64px; height: auto; border-radius: 50%; box-shadow: 0 0 12px rgba(0, 0, 0, 0.2) inset; } /* * user-profile.less * */ .hydra .user-profile { background-repeat: no-repeat; background-size: cover; } .hydra .user-profile div.user-profile-container div.profile-image-container { position: relative; margin: 0 auto; width: 200px; } .hydra .user-profile div.user-profile-container div.profile-image-container img.profile-user-img { display: block; width: 100%; height: auto; border-radius: 50%; box-shadow: 0 0 12px rgba(0, 0, 0, 0.2) inset; } .hydra .user-profile div.user-profile-container div.profile-image-container div.profile-verified-check { display: block; margin: 0; padding: 0; position: absolute; right: 7%; bottom: 7%; font-size: 24px; color: #487fff; border: solid 2px white; border-radius: 50%; line-height: 0; background-color: white; } .hydra .user-profile div.user-profile-container div.profile-name { font-size: 2em; font-weight: bold; line-height: 1em; } .hydra .user-profile div.user-profile-container div.profile-username { font-size: 0.8em; } /* * gab-post.less * */ .hydra .gab-post { padding: 1em; border: solid 1px rgba(0, 0, 0, 0.2); border-radius: 8px; } .hydra .gab-post div.user-picture-container { width: 64px; } .hydra .gab-post div.user-picture-container img.user-picture { display: block; margin: 0; padding: 0; width: 100%; height: auto; border-radius: 50%; } .hydra .gab-post div.post-name { font-size: 1.25em; line-height: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hydra .gab-post div.post-username { font-size: 0.8em; line-height: 1; } .hydra .gab-post div.image-slider { display: flex; width: 100%; white-space: nowrap; overflow-x: auto; } .hydra .gab-post div.image-slider div.image-card { display: block; padding: 4px; border: solid 1px rgba(0, 0, 0, 0.2); } .hydra .gab-post div.image-slider div.image-card img { display: block; width: auto; height: 240px; } /* * lightbox.less * */ .hydra div.hydra-lightbox { position: fixed; box-sizing: border-box; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-color: rgba(24, 40, 24, 0.8); user-select: none; overflow: auto; z-index: 20; } .hydra div.hydra-lightbox div.image-container { display: block; box-sizing: border-box; min-width: 40%; max-width: 90%; margin: 90px auto; } .hydra div.hydra-lightbox div.image-container img.lightbox-image { display: block; box-sizing: border-box; width: 100%; height: auto; user-select: none; pointer-events: none; border: solid 15px white; margin: 1em 0; } /* * ad-unit.less * */ .hydra .ad-unit { display: block; width: 100%; height: auto; } .hydra .ad-unit.home img.ad-unit { display: block; width: 180px; height: 100px; } .hydra .ad-unit.item { margin-left: auto; margin-right: auto; } .hydra .ad-unit.item.header { max-width: 970px; } .hydra .ad-unit.item.leaderboard { max-width: 728px; } .hydra .ad-unit.item.sidebar { max-width: 300px; } .hydra .bitcoin-button { display: block; padding: 6px 12px; line-height: 1; border: solid 1px; background-color: #f18c0f; color: white; } .hydra .bitcoin-button:hover { background-color: #f4a33f; } .hydra .bitcoin-button:active { background-color: #c2700b; } /* * column-title.less * */ .hydra .column-title { display: block; max-width: 280px; margin: 0 8px; line-height: 1; padding: 6px 16px; font-size: 2em; text-align: center; font-style: italic; font-weight: bold; } .hydra .column-title.tracked-domain { padding: 2px; font-size: 1.2em; } /* * column-item.less * */ .hydra .column-item { padding: 8px; border-bottom: solid 1px #cccccc; overflow-wrap: break-word; z-index: 100; } .hydra .column-item:last-child { border-bottom: none; } /* * column-link.less * */ .hydra .column-link { display: block; margin-bottom: 4px; line-height: 1.2em; font-weight: 600; } /* * column-image.less * Copyright 2019,2020 Gab AI, Inc. */ .hydra img.column-image { display: block; width: 100%; max-width: 180px; height: auto; } .hydra img.column-image.column-image-large { max-width: 240px; } .hydra img.column-image.sponsored { height: 100px; object-fit: cover; } /* * connect-with-gab.less * */ .hydra .connect-with-gab { display: block; line-height: 1em; position: fixed; top: 0; right: 0; margin: 1em; padding: 0.5em 1em; border: solid 1px black; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } .footer { background-color: #fbfafa; border-top: 1px solid #eee; } .footer__inner { padding: 3rem 0; } .footer__about { display: block; color: #2D3436; font-size: 14px; } .footer__subtitle { display: block; color: #666; word-wrap: break-word; } .footer__col-title { display: block; font-weight: 400; color: #2D3436; margin-bottom: 1rem; } .footer__col-link { display: block; color: #666; font-size: 14px; cursor: pointer; } .footer__col-link:hover { color: #2D3436; } @media (min-width: 0px) and (max-width: 767px) { .footer__about, .footer__subtitle { padding: 0 1rem; } .footer__col-title { font-weight: 600; font-size: 16px; } .footer__col-link { font-size: 16px; padding: 0.35rem 0; } } @media (min-width: 0px) and (max-width: 992px) { .footer__inner { padding: 2rem 0; } } .footer-below { background-color: #eee; border-top: 1px solid #ddd; } .footer-below__inner { display: flex; flex-direction: row; padding: 1rem 0; justify-content: center; } .footer-below__copyright { line-height: 26px; color: #444; } .footer-below__copyright a { margin-left: 4px; color: #444; text-decoration: none; } .footer-below__payment-block { margin-left: auto; } .footer-below__payment-block > span { font-size: 14px; line-height: 26px; color: #444; } @media (min-width: 0px) and (max-width: 767px) { .footer-below__inner { flex-direction: column; align-items: center; } .footer-below__payment-block { margin: 1rem auto 0; } } .hydra-dark .footer { background-color: #000 !important; border-top: 1px solid #333 !important; } .hydra-dark .footer-below { background-color: #111 !important; border-top: 1px solid #333 !important; } .hydra-dark .footer__col-title { color: #bbb !important; } .hydra-dark .footer__about { color: #EEE !important; } .hydra-dark .footer-below__payment-block span, .hydra-dark .footer-below__copyright, .hydra-dark .footer-below__copyright a { color: #ccc !important; } .hydra-dark .footer__col-link { color: #fff !important; } /* * dissenter-frame.less * */ .hydra .dissenter-frame-container { position: fixed; top: 10%; bottom: 10%; width: 480px; background: black; box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.4); transition: right 0.5s, left 0.5s; } .hydra .dissenter-frame-container.pin-right { right: 0; } .hydra .dissenter-frame-container.pin-right.closed { right: -490px; } .hydra .dissenter-frame-container.pin-left { left: 0; } .hydra .dissenter-frame-container.pin-left.closed { left: -480px; } @media (max-width: 480px) { .hydra .dissenter-frame-container { top: 32px; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } .hydra .dissenter-frame-container.closed { display: none; } } .hydra .dissenter-frame-container .dissenter-menu { position: relative; top: -32px; height: 32px; padding: 0 4px; font-size: 24px; line-height: 1; background: #21cf7a; color: white; box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.4); } .hydra .dissenter-frame-container .dissenter-menu .dissenter-menu-label { padding: 4px; } .hydra .dissenter-frame-container .dissenter-menu .dissenter-menu-button { padding: 4px; cursor: pointer; } .hydra .dissenter-frame-container iframe.dissenter-frame { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .hydra img.headline-image { width: 100%; max-width: 640px; height: auto; box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.4); } /* * light-switch.less * */ .hydra .light-switch { color: #e8e8e8; cursor: pointer; } .hydra .light-switch.switch-on { color: yellow; } /* * hydra-loading.less * */ .hydra .hydra-loading { position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 0; margin: 0; width: 100%; height: 100%; outline: none; border: none; background-color: rgba(0, 0, 0, 0.8); color: #e8e8e8; font-family: 'Open Sans'; } .hydra .hydra-loading .hydra-loading-prompt { font-size: 24px; font-weight: bold; } .hydra .hydra-menu { position: fixed; top: 0; right: 0; left: 0; display: flex; box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); } .hydra img.hydra-menu-image { display: inline-block; height: 1.1em; } .hydra img.navbar-profile-img { height: 2em; border-radius: 50%; } .hydra.hydra-dark img.navbar-profile-img { height: 1.25em; border-radius: 50%; } .navbar { background: #000; background-color: #000; padding: 0 !important; height: 58px !important; } .navbar .navbar-brand { margin-right: 0.25em !important; padding: 0 !important; } .navbar .navbar-brand__svg, .navbar .navbar-brand__svg g { fill: #fff; } .navbar .nav-link { font-weight: 500 !important; font-size: 1rem !important; padding: 0.5rem !important; border: 0 !important; } .navbar .dropdown-toggle:after { content: none !important; } .navbar .nav-item { border-bottom: 2px solid transparent; } .navbar .nav-item.active { border-color: #fff; } .navbar-collapse.show { background-color: #000; border-bottom: 1px solid #fff; padding: 1rem; box-shadow: 0 10px 10px 0px rgba(255, 255, 255, 0.5); } .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); } .navbar-container-fluid { width: 1255px; } .hydra-dark .navbar-collapse.show, .hydra-dark .navbar { background: #000 !important; background-color: #000 !important; } .hydra-dark .navbar-brand__svg, .hydra-dark .navbar-brand__svg g { fill: #21D07B !important; } @media (min-width: 1160px) and (max-width: 1280px) { .navbar-container-fluid { width: 1140px; } } @media (min-width: 1080px) and (max-width: 1160px) { .navbar-container-fluid { width: 1060px; } } @media (min-width: 992px) and (max-width: 1080px) { .navbar-container-fluid { width: 950px; } } @media (min-width: 0px) and (max-width: 992px) { .navbar-brand { margin-left: 1rem; } .navbar-container-fluid { width: 100%; } } body.hydra.hydra-obs-plugin { margin: 0; padding: 0; overflow: hidden; position: relative; background: rgba(0, 0, 0, 0.3); color: #e8e8e8; font-family: "system-ui", "sans-serif"; } body.hydra.hydra-obs-plugin h1, body.hydra.hydra-obs-plugin h2, body.hydra.hydra-obs-plugin h3, body.hydra.hydra-obs-plugin h4, body.hydra.hydra-obs-plugin h5, body.hydra.hydra-obs-plugin h6, body.hydra.hydra-obs-plugin pre { margin: 0; padding: 0; line-height: 1; color: inherit; } body.hydra.hydra-obs-plugin .obs-plugin { box-sizing: border-box; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; margin: 0; padding: 0; border: none; outline: none; font-size: 24px; line-height: 25px; } body.hydra.hydra-obs-plugin .obs-plugin.ticker { box-sizing: border-box; position: relative; width: 100%; height: 170px; overflow: hidden; } body.hydra.hydra-obs-plugin .obs-plugin.ticker .branding-container { box-sizing: border-box; position: absolute; bottom: 2px; right: 0; margin-right: 8px; font-size: 16px; line-height: 1.25; color: #808080; } body.hydra.hydra-obs-plugin .obs-plugin.ticker .lead-item { box-sizing: border-box; position: absolute; top: 0; right: 0; width: 100%; height: 170px; opacity: 0; transition: opacity 1s; } body.hydra.hydra-obs-plugin .obs-plugin.ticker .lead-item.item-visible { opacity: 1; } body.hydra.hydra-obs-plugin .obs-plugin.ticker .lead-item img.item-image { box-sizing: border-box; width: 170px; height: 170px; margin-right: 4px; background-position: center; background-size: cover; overflow: hidden; border: none; border-image: none; border-image-width: 0; outline: none; } body.hydra.hydra-obs-plugin .obs-plugin.ticker .lead-item .item-headline { box-sizing: border-box; margin-bottom: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } body.hydra.hydra-obs-plugin .obs-plugin.ticker .lead-item .item-progress { box-sizing: border-box; width: 100%; height: 2px; margin: 0.5em 0; background: #00d178; } body.hydra.hydra-obs-plugin .obs-plugin.ticker .lead-item .item-summary { box-sizing: border-box; font-size: 24px; line-height: 1.2; } body.hydra.hydra-obs-plugin .obs-plugin.ticker #news-ticker { box-sizing: border-box; display: flex; flex-wrap: nowrap; position: absolute; bottom: 14px; left: 0; width: 100%; color: #809080; } body.hydra.hydra-obs-plugin .obs-plugin.ticker #news-ticker .ticker-item { box-sizing: border-box; display: inline-block; margin: 0 25px; padding: 0; width: 480px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hydra .page-stats { margin-top: 2em; font-family: 'Open Sans'; } .hydra .page-stats .stat-container { display: block; width: 100%; padding: 1em; line-height: 1; border: solid 4px #ff0000; border-radius: 100px; text-align: center; } .hydra .page-stats .stat-container .stat-label { margin-bottom: 6px; font-size: 1.1em; font-weight: bold; } .hydra .page-stats .stat-container .stat-value { display: inline; font-size: 1.4em; font-weight: bold; font-style: italic; text-align: center; color: #ff0000; } /* * page-title.less * */ .hydra .page-title { display: block; margin: 0.5em 0; line-height: 1; text-align: center; font-style: italic; font-weight: 800; font-size: 3em; } @media (min-width: 480px) { .hydra .page-title { font-size: 4em; letter-spacing: -3px; } } @media (min-width: 640px) { .hydra .page-title { font-size: 5em; letter-spacing: -3px; } } @media (min-width: 800px) { .hydra .page-title { font-size: 6em; letter-spacing: -3px; } } @media (min-width: 1280px) { .hydra .page-title { font-size: 7em; letter-spacing: -8px; } } /* * poll-answer.less * */ .hydra .poll-container { max-width: 640px; margin-left: auto; margin-right: auto; } .hydra .poll-answer { display: block; margin-bottom: 8px; } .hydra .poll-answer .answer-chart { position: relative; width: 100%; height: 24px; margin-bottom: 1px; border: solid 1px #4a4a4a; background-color: #4a4a4a; overflow: hidden; } .hydra .poll-answer .answer-chart .line-graph { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; background-color: #4a4aff; } .hydra .poll-answer .answer-chart .line-label { position: absolute; top: 0; right: 0; bottom: 0; left: 0; color: inherit; } /* * promotional-section.less * Copyright 2019 Gab AI */ .hydra .promotional-section { margin: 48px 0; } .hydra .rss-item-headline { font-weight: 600; font-size: 14px; color: #000 !important; } .hydra .rss-feed-item-container { overflow: hidden; } .hydra .rss-feed-item-container.collapsed { max-height: 6em; } .hydra .rss-feed-item-container .rss-feed-item img { display: block; max-width: 100%; height: auto; } /* * search.less * Copyright (C) 2019,2020 Gab AI, Inc. */ .hydra .search-form-container { padding-top: 2em; padding-bottom: 2em; } .hydra .section-title { margin: 4em 0; text-align: center; } .hydra .section-title .title-text { font-size: 2.5em; } @media (min-width: 480px) { .hydra .section-title .title-text { font-size: 3em; } } @media (min-width: 640px) { .hydra .section-title .title-text { font-size: 4em; } } @media (min-width: 800px) { .hydra .section-title .title-text { font-size: 5em; } } .hydra .section-title .subtitle { font-style: italic; } /* * start-trend-form.less * Copyright (C) 2019,2020 Gab AI, Inc. */ .hydra .start-trend-container { max-width: 640px; margin-left: auto; margin-right: auto; } .hydra .start-trend-container form.start-trend-form { margin-bottom: 4em; text-align: center; } .hydra .start-trend-container form.start-trend-form input[type="url"].trend-url-input { display: block; width: 100%; padding: 1em; outline: none; border: solid 2px #cccccc; border-radius: 8px; background: transparent; text-align: center; color: #1a1a1a; } .hydra.hydra-dark .start-trend-container form.start-trend-form input[type="url"].trend-url-input { color: #cccccc; border-color: #cccccc; } /* * textarea.less * */ .hydra textarea.no-resize { resize: none; } /* * trend-column.less * */ .hydra .trend-column { position: relative; border: solid 1px #cccccc; } .hydra .trend-column.no-border { border: none; }