trAvis - MANAGER
Edit File: styles.css
/* Fonts */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap"); @font-face { font-family: "Perfectly Nineties"; src: url("./fonts/PerfectlyNineties-Semibold.otf") format("opentype"), url("./fonts/PerfectlyNineties-SemiboldItalic.otf") format("opentype"); font-weight: 600; font-style: normal; } @font-face { font-family: "Perfectly Nineties Thin"; src: url("./fonts/PerfectlyNineties-Regular.otf") format("opentype"), url("./fonts/PerfectlyNineties-RegularItalic.otf") format("opentype"); font-weight: 100; font-style: normal; } @font-face { font-family: "Inter"; src: url("./fonts/PerfectlyNineties-Semibold.ttf") format("opentype"); font-weight: 600; font-style: normal; } :root { /* Fonts */ --primary-font: "Perfectly Nineties", sans-serif; --primary-font-weight: 600; --primary-font-line-height: 90%; --secondary-font: "Inter", sans-serif; --secondary-font-line-height: 140%; --subheader-font: "Perfectly Nineties Thin", sans-serif; /* Paddings/ Margins */ --padding-standard: 16px; --padding-bottom: 20px; --padding-button: 14px 24px; --margin-standard: 40px auto; /* Global Colors */ --color-black: #050505; --color-white: #fff; --color-wash: #fcf9f5; --color-stone: #f6ecd8; --color-grey: #d9d9d9; /* Standard Colors */ --color-red: #e35225; --color-blue: #5395d3; --color-yellow: #fecc4c; --color-green: #1e9a86; --color-pink: #ff8eab; --color-gold: #d6b454; /* Muted Colors */ --color-muted-red: #fbbfa4; --color-muted-blue: #b6d3ee; --color-muted-yellow: #ffe39a; --color-muted-green: #aed8ca; --color-muted-green2: #d3eae7; --color-muted-pink: #ffd9e3; --color-muted-gold: #e3d5ae; } /* Header Banner */ .header-banner { text-align: center; background: var(--color-white); background-image: url("../images/Bdow-Sumo.jpg"); background-size: 200px auto; background-repeat: no-repeat; border-bottom: 2px solid var(--color-grey); min-height: 120px; background-position: center; } .highlight { color: #000; background: linear-gradient( transparent 55%, var(--color-muted-green) 55% ); /* Gives the highlighted text effect */ } .wash-bg { background-color: var(--color-wash); } .flex-container .flex-item.wash-bg { display: block; padding: 100px 20px; } /* Flex stuff */ .flex-container { display: flex; justify-content: center; /* Center horizontally */ align-items: center; font-weight: var(--primary-font-weight); text-align: center; font-size: 12px; width: 100%; } @media (max-width: 768px) { .flex-container { flex-direction: column; } } .flex-container .flex-item { padding: 0 20px; } .flex-container .flex-item.flex-item-half { width: 50%; } .flex-container .flex-item.flex-item-half:nth-child(1) { text-align: left; } /* Widget Header */ .sumome-plugin-dashboard-widget-header { background-color: var(--color-stone); color: var(--color-black); padding-bottom: var(--padding-bottom); font-family: var(--secondary-font); font-size: 16px; } .sumome-plugin-dashboard-widget-header-title { font-size: 64px; font-family: var(--primary-font); margin: 0px auto; padding-top: 50px; padding-bottom: 30px; text-align: center; line-height: 50px; color: #000; } .sumome-plugin-dashboard-widget-header-desc { margin: 0px auto; text-align: center; max-width: 780px; } /* Widget Content Header */ .sumome-plugin-dashboard-widget-header .flex-container { margin: var(--margin-standard); max-width: 600px; } .sumome-plugin-dashboard-widget-header .flex-container span { display: block; font-size: 48px; font-family: var(--primary-font); line-height: var(--primary-font-line-height); color: var(--color-green); margin-bottom: var(--padding-bottom); } .sumome-plugin-dashboard-widget-top-note-container { margin: 0 auto; padding: 50px 0; max-width: 1000px; font-weight: 400; color: var(--color-black); } .sumome-plugin-dashboard-widget-top-note-container span { display: block; color: #000; font-weight: var(--primary-font-weight); margin: 12px; line-height: var(--primary-font-line-height); } .sumome-plugin-dashboard-widget-top-note-container.powered-by-bdow { text-align: center; width: 100%; margin: 0 auto; max-width: 1100px; } .scrunch-wrapper { max-width: 600px; margin: 0 auto; text-align: center; color: var(--color-black); } .scrunch-wrapper .sumome-plugin-dashboard-widget-header-title { line-height: 70px; font-family: var(--subheader-font); font-weight: 100; } .icon-circle { width: 100px; height: 100px; border-radius: 100%; margin: 0 auto; padding: var(--padding-standard); background-color: var(--color-muted-green2); margin-bottom: var(--padding-bottom); } /* Widget Content Row */ .plugin-content-wrapper { background-color: var(--color-muted-green); position: relative; width: 100%; /* Adjust width and height as needed */ font-family: var(--secondary-font); } .sumome-plugin-dashboard-widget-row { padding: 80px 0; max-width: 1100px; margin: 0 auto; } .sumome-plugin-dashboard-widget-row .sumome-plugin-dashboard-widget-header-title { font-size: 40px; width: 100%; text-align: left; } .sumome-plugin-dashboard-widget-row .highlight { background: linear-gradient(transparent 55%, var(--color-green) 55%); } /* Buttons */ button.green.connect-button, button.green.dashboard-button, .sumome-plugin-dashboard-widget-container a.button-outline, .sumome-plugin-dashboard-widget-container a.button-black { text-align: center; background-color: var(--color-green); font-family: var(--secondary-font); line-height: var(--secondary-font-line-height); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; width: auto; min-width: 200px; color: #fff; margin: 0px auto; border: 0px; border-radius: 50px; padding: var(--padding-button); } .sumome-plugin-dashboard-widget-container a.button-outline { background-color: transparent; display: block; max-width: 220px; color: #000; margin: 20px 0; border: 3px solid #000; } .sumome-plugin-dashboard-widget-container a.button-black { color: var(--color-white); display: block; max-width: 220px; background-color: var(--color-black); } /* old stuff */ .sumome-plugin-main .mobile { display: none; } .sumome-plugin-main .no-mobile { display: block; } .sumome-plugin-main .hidden { display: none; } .sumome-plugin-container { background: var(--color-wash); } .sumome-plugin-container { clear: both; margin-left: -20px; overflow: auto; } .sumome-plugin-linkalike { display: inline-block; width: auto; cursor: pointer; color: var(--color-green); } .sumome-plugin-main { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; color: #65717b; } .sumome-plugin-main .sumome-plugin-dashboard-widget-inner { margin: 0px; } .sumome-plugin-main .row { width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; display: block; } .sumome-plugin-main .row .row { width: auto; margin-left: -0.9375rem; margin-right: -0.9375rem; margin-top: 0; margin-bottom: 0; max-width: none; } .sumome-plugin-main .columns { position: relative; padding-left: 0.9375rem; padding-right: 0.9375rem; float: left; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .sumome-plugin-main .large-4 { width: 33.33333%; } .sumome-plugin-main .large-6 { width: 50%; } .sumome-plugin-main .large-8 { width: 66.66667%; } .sumome-plugin-main .large-12 { width: 100%; } .sumome-plugin-main .th { line-height: 0; display: inline-block; border: solid 4px #fff; max-width: 100%; -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; transition: all 200ms ease-out; } .sumome-plugin-main img { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; } .sumome-plugin-main h4 { font-size: 1.4375rem; line-height: 1.4; margin: 0.5em 0; } .sumome-plugin-main .sumome-instructions { text-align: center; width: 50%; margin: 0px auto; padding-top: 10px; } .sumome-plugin-main .site-ID .sumome-instructions { text-align: left; } .sumome-plugin-main .site-ID input[type="submit"] { border-radius: 4px; height: 40px; padding: 0px 20px; background: #5bc739; color: #fff; margin: 0px auto; text-transform: uppercase; border-color: transparent; -webkit-box-shadow: none; box-shadow: none; text-shadow: none; line-height: 40px; } .sumome-plugin-main .list-number { border-radius: 25px; background: #6c65c2; width: 35px; height: 35px; color: #fff; display: inline-block; text-align: center; line-height: 35px; font-size: 18px; } .sumome-plugin-main .list-number-title { color: #0f74b5; font-size: 24px; font-weight: bold; display: inline-block; width: auto; margin-left: 10px; } .sumome-plugin-main .site-ID .list-bullet { margin-top: 0px !important; } .sumome-plugin-main .row3 .list-bullet { margin-top: 80px; } .sumome-plugin-main .row3, .row3 p.submit { text-align: center; margin: 0px auto; padding-top: 25px; } .sumome-plugin-main .row3 table { margin: 0px auto; } .sumome-plugin-main input[type="text"] { border-radius: 5px; border: 1px solid #dcd9ea; height: 41px; } .sumome-plugin-main .site-ID-container button.button { line-height: 42px; vertical-align: middle; padding: 0px 20px; color: #495259; position: relative; border: 0px; left: 10px; top: -1px; cursor: pointer; border-radius: 4px; height: 42px; background-color: #ccc; font-weight: bold; } .sumome-plugin-popup-container .site-ID button.button { height: 40px; line-height: 40px; vertical-align: middle; padding: 0px 20px; border-radius: 4px; background-color: #d6d3e5; color: #5a596d; position: relative; left: 20px; font-weight: bold; } .sumome-plugin-main input[type="submit"] { border-radius: 50px; height: 40px; padding: 0px 20px; background: #8067db; color: #fff; margin: 0px auto; text-transform: uppercase; border-color: transparent; -webkit-box-shadow: none; box-shadow: none; text-shadow: none; } .sumome-plugin-main .footer { background: var(--color-wash); margin: 0px auto; text-align: center; position: relative; bottom: 0px; left: 0px; padding-top: 60px; line-height: 25px; margin-top: 50px; } .sumome-plugin-main .footer a { color: --var(color-green); cursor: pointer; text-decoration: underline; } .sumome-plugin-main .footer .appsumo-logo { width: 100%; max-width: 232px; margin-top: 75px; } .sumome-plugin-main .sumome-help { width: 50%; margin: 0px auto; } .sumome-plugin-main .sumome-help span { display: block; } .sumome-plugin-main .sumome-logged-in-container-overlay.dim { opacity: 0.4; background-color: #000; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin-left: -20px; } .sumome-plugin-main .sumome-logged-in-container .items { width: 80%; margin: 0px auto; } .sumome-plugin-main .sumome-logged-in-container .items div:hover { box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2); opacity: 1; color: #0073b7; } .sumome-plugin-main .sumome-logged-in-container .items div:hover div, .sumome-plugin-main .sumome-logged-in-container .items div div:hover { box-shadow: none; opacity: 1; color: #0073b7; } .sumome-plugin-main .sumome-logged-in-container .items .item-tile { display: inline-flex; width: calc(33% - 32px); margin: 32px 16px 0; text-align: center; justify-content: center; align-items: center; background-color: var(--color-white); color: var(--color-black); height: 200px; cursor: pointer; font-size: 20px; border: 1px solid var(--color-grey); border-radius: 8px; font-weight: bold; transition: 0.2s all ease; } .sumome-plugin-main .sumome-logged-in-container .items .item-tile img { width: 100%; height: 100%; max-width: 64px; max-height: 64px; display: block; margin: 0 auto 20px; } /* top 2 tiles */ .sumome-plugin-main .sumome-logged-in-container .items > div:nth-child(1), .sumome-plugin-main .sumome-logged-in-container .items > div:nth-child(2) { width: calc(50% - 38px); } .sumome-plugin-main .sumome-logged-in-container .items div.sumo-apps, .sumome-plugin-main .sumome-logged-in-container .items div.sumo-store { white-space: nowrap; } .sumome-plugin-main .sumome-logged-in-container .items .notification-count, .sumome-plugin-main .sumome-logged-in-container .items .notification-count:hover, .sumome-plugin-main .sumome-logged-in-container .items:hover .notification-count { text-align: center; font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 15px; color: #fff; -webkit-border-radius: 4em; -moz-border-radius: 4em; border-radius: 50%; background: #f03e18; border: none; text-indent: 0; cursor: pointer; white-space: nowrap; height: 30px; width: 30px; line-height: 30px; margin-left: 10px; margin-bottom: 5px; display: inline-block; vertical-align: middle; } .sumome-plugin-main .form-container { min-height: 450px; /*height:450px;*/ } .sumome-plugin-main .loading { text-align: center; padding-top: 0px; height: calc(100vh - 32px); line-height: calc(100vh - 32px); vertical-align: middle; background-color: #fff; } .sumome-plugin-main .back-logged-in { cursor: pointer; display: none; } .sumome-plugin-main .tabbed-content-container { text-align: center; width: 80%; margin: 0px auto; } .sumome-plugin-main .pointer { cursor: pointer; } .sumome-plugin-main.status-logged-out .site-ID table { margin: 0px auto; width: 100%; } .sumome-plugin-main.status-logged-out .sumome-site-id { width: 100%; height: 80px; } /*site id popup*/ .sumome-plugin-main .site-ID { width: 80%; margin: 0px auto; text-align: center; } .sumome-plugin-main .site-id-form .site-ID { width: 100%; } .sumome-plugin-main .site-ID .list-number-title { font-size: 24px; font-weight: 600; color: #495259; padding-bottom: 10px; } .sumome-plugin-main .site-ID table { margin: 0px auto; } .sumome-plugin-main .sumome-site-id { width: 650px; height: 42px; padding: 10px 10px; vertical-align: bottom; background-color: #fff; box-shadow: none; font-size: 16px; border: 1px solid #d1d4d5; border-radius: 4px; } .sumome-plugin-main .site-ID .button-primary { padding-top: 14px; padding-right: 28px; padding-bottom: 15px; padding-left: 28px; font-size: 13px; height: auto !important; width: auto; } /*end site id popup*/ /*start popup*/ .sumome-plugin-popup-container { display: none; width: 100vw; height: 70vh; /*position:absolute;*/ top: 5%; left: 0px; min-width: 200px; position: fixed; } .sumome-plugin-popup-container .sumome-plugin-popup-container-outer { width: 60%; /*height:70vh; max-height:70vh;*/ margin: 0px auto; overflow: hidden; overflow-x: hidden; border-bottom: 1px solid #000; } .sumome-plugin-popup-container .sumome-plugin-popup-container-inner.default-height { height: 70vh !important; } .sumome-plugin-popup-container .sumome-plugin-popup-container-inner { width: 100%; max-height: 70vh; margin: 0px auto; overflow: auto; overflow-x: hidden; background-color: white; border: 1px solid black; padding-bottom: 0px; } .sumome-plugin-popup-container .sumome-plugin-popup-container-inner.disable-scroll { overflow: hidden; } .sumome-plugin-popup-container .popup-iframe { width: 100%; height: 100%; border-bottom: 1px solid black; } .sumome-plugin-popup-contents { height: 100%; } .sumome-plugin-main .popup-header-container { cursor: pointer; width: 60%; margin: 0px auto; text-align: right; border-top-left-radius: 5px; background-color: #0073b7; color: #f0f3f5; font-size: 16px; font-family: "Open Sans", sans-serif; font-weight: bold; line-height: 20px; text-shadow: none; position: relative; z-index: 1; height: 60px; } .sumome-plugin-popup-container .sumome-modal-header { margin: 0px auto; display: block; background-color: #0073b7; color: #f0f3f5; font-size: 16px; font-family: "Open Sans", sans-serif; font-weight: bold; line-height: 20px; text-shadow: none; position: relative; z-index: 1; height: 60px; cursor: auto !important; margin: 0px; padding: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .sumome-plugin-popup-container .sumome-modal-header .popup-title { width: auto; display: inline-block; vertical-align: middle; line-height: 60px; padding-left: 45px; background-image: url("../images/sumome_crown.png"); background-repeat: no-repeat; background-position: left center; margin-left: 20px; } .sumome-plugin-main .popup-close, .sumome-plugin-dashboard-widget-close-button { background: url("../images/modal-close.png") no-repeat; float: right; width: 15px; height: 16px; margin-top: 20px; margin-right: 15px; cursor: pointer; } /*end popup*/ .sumome-plugin-dashboard-widget-close-button { width: 40px; height: 40px; margin-top: 20px; margin-right: 15px; background-color: #7584c5; color: #fff; border: 2px solid #a5cff5; border-radius: 99999px !important; background-position: center; } /*dashboard*/ .sumome-plugin-dashboard-widget { position: fixed; top: 32px; left: 160px; bottom: 0; z-index: 999; width: calc(100% - 160px); overflow: auto; box-sizing: border-box; background-color: #f1f1f1; } .sumome-plugin-dashboard-widget-inner { margin: 20px; /*padding: 80px 16px;*/ min-height: calc(100vh - 72px); position: relative; background: #fff; border: 1px solid #ddd; color: #65717b; overflow-x: hidden; } .sumome-plugin-dashboard-widget.minimized { cursor: unset; height: 300px; width: auto; position: static; } .sumome-plugin-dashboard-widget-learn-more { color: #fff; text-decoration: underline; font-size: 0.8em; font-weight: normal; padding-top: 10px; padding-bottom: 0px; cursor: pointer; display: none; } .sumome-plugin-dashboard-widget.minimized .sumome-plugin-dashboard-widget-learn-more { display: block; } .sumome-plugin-dashboard-widget div.forms { text-align: center; } .sumome-plugin-dashboard-widget div.sumome-plugin-dashboard-widget-close-button { margin-top: 10px; margin-right: 10px; right: 0px; top: 0px; } .sumome-plugin-dashboard-widget.minimized div.sumome-plugin-dashboard-widget-close-button { display: none; } .sumome-plugin-dashboard-widget-inner ul { list-style-image: url("../images/checkmark.png"); text-align: left; margin: 0px auto; font-size: 16px; line-height: 25px; } .sumome-plugin-dashboard-widget-inner .sumome-plugin-dashboard-widget-top-note ul { width: 70%; } .sumome-plugin-dashboard-widget-inner .sumome-plugin-dashboard-widget-row ul { margin-left: 25px; } .sumome-plugin-dashboard-widget-inner.dim { opacity: 0.2; pointer-events: none; } .sumome-plugin-dashboard-widget-separator { min-height: 180px; } .sumome-plugin-dashboard-widget-separator2 { min-height: 180px; background-color: #f0f3f5; } .sumome-plugin-dashboard-widget-top-note { max-width: 650px !important; border: 1px solid #c8cbcd; border-radius: 4px; background-color: #fff; padding-bottom: 50px; margin-top: 25px; background-image: url(../images/sumome-site-welcome-graph.png); background-repeat: no-repeat; background-position: center; margin: 25px auto; } .sumome-plugin-dashboard-widget-top-note-title { font-size: 35px; font-weight: bold; margin: 0px auto; padding-top: 50px; padding-bottom: 30px; text-align: center; line-height: 40px; color: #495259; } .sumome-plugin-dashboard-widget-top-note-desc { width: 80%; margin: 0px auto; text-align: center; font-size: 18px; line-height: 28px; } .sumome-plugin-left, .sumome-plugin-right { display: inline-block; min-width: 50%; text-align: center; vertical-align: middle; float: none !important; } .sumome-plugin-center { text-align: center; } .sumome-plugin-center.social-media a { padding: 7px; } .sumome-plugin-left div { padding-left: 80px; } .sumome-plugin-left img, .sumome-plugin-right img { width: 420px; float: left; margin-left: 50px; } .sumome-plugin-dashboard-widget-row-title { color: #495259; text-align: left; font-size: 20px; margin: 0px auto; width: 80%; margin-bottom: 20px; font-weight: bold; } .sumome-plugin-dashboard-widget-row-desc { text-align: left; font-size: 15px; width: 80%; white-space: normal; margin: 0px auto; line-height: 22px; } .sumome-plugin-dashboard-widget-middle-note-title { font-size: 25px; margin: 0px auto; padding-top: 35px; padding-bottom: 15px; text-align: center; line-height: 40px; color: #0f74b5; } .sumome-plugin-dashboard-widget-middle-note-desc { width: 530px; margin: 0px auto; text-align: center; font-size: 15px; line-height: 22px; } .sumome-plugin-dashboard-widget-middle-note-clients { margin: 0px auto; text-align: center; padding-top: 20px; padding-bottom: 45px; max-width: 1100px; line-height: 80px; } .sumome-plugin-dashboard-widget-middle-note-clients img { padding: 0px 20px; line-height: 260px; vertical-align: middle; } .sumome-plugin-dashboard-widget-header-button { text-align: center; padding-top: 30px; padding-bottom: 20px; } .sumome-plugin-dashboard-widget-footer-button { text-align: center; padding-top: 50px; padding-bottom: 50px; } /*minimized*/ .sumome-plugin-dashboard-widget.minimized { height: auto; } .sumome-plugin-dashboard-widget.minimized .sumome-plugin-dashboard-widget-inner { margin: 0px; min-height: auto; } .sumome-plugin-dashboard-widget.minimized .sumome-plugin-dashboard-widget-header-button { padding-top: 0px; padding-bottom: 0px; } .sumome-plugin-dashboard-widget.minimized .sumome-plugin-dashboard-widget-header-title { padding-top: 20px; padding-bottom: 10px; line-height: 40px; font-size: 28px; } .sumome-plugin-dashboard-widget.minimized .sumome-plugin-dashboard-widget-header-desc { font-size: 13px; } .sumome-plugin-dashboard-widget.minimized .sumome-plugin-dashboard-widget-header-title, .sumome-plugin-dashboard-widget.minimized .sumome-plugin-dashboard-widget-header-desc { width: 100% !important; } .logged-in.status-logged-out, .logged-out.status-logged-in { display: none; } .sumome-plugin-dashboard-widget.minimized button.green { width: auto; height: auto; line-height: 4em; margin-top: 10px; padding: 0 3em; font-size: 1em; } .sumome-plugin-dashboard-widget.minimized .sumome-plugin-dashboard-widget-top-note { width: 90% !important; } .sumome-plugin-dashboard-widget.minimized .sumome-plugin-dashboard-widget-container { display: none; } /*end dashboard*/