Last active
January 14, 2020 08:18
-
-
Save mitchellkrogza/39478b33fbb977a81a1de1fa4886e64b to your computer and use it in GitHub Desktop.
My own custom css for a Discourse Forum - Use it, change it and please send back any improvements
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** Discourse CSS by Mitchell Krog - [email protected] **/ | |
| @font-face { | |
| font-family: ProximaNova; | |
| src: url('https://dmmj3mmt94rvw.cloudfront.net/webfonts/ProximaNova300.eot'); | |
| src: url('https://dmmj3mmt94rvw.cloudfront.net/webfonts/ProximaNova300.eot?#iefix') format('embedded-opentype'), url('https://dmmj3mmt94rvw.cloudfront.net/webfonts/ProximaNova300.woff') format('woff'), url('https://dmmj3mmt94rvw.cloudfront.net/webfonts/ProximaNova300.ttf') format('truetype'), url('https://dmmj3mmt94rvw.cloudfront.net/webfonts/ProximaNova300.svg#icon') format('svg'); | |
| font-weight: 300; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: ProximaNova; | |
| src: url('https://dmmj3mmt94rvw.cloudfront.net/webfonts/ProximaNova400.eot'); | |
| src: url('https://dmmj3mmt94rvw.cloudfront.net/webfonts/ProximaNova400.eot?#iefix') format('embedded-opentype'), url('https://dmmj3mmt94rvw.cloudfront.net/webfonts/ProximaNova400.woff') format('woff'), url('https://dmmj3mmt94rvw.cloudfront.net/webfonts/ProximaNova400.ttf') format('truetype'), url('https://dmmj3mmt94rvw.cloudfront.net/webfonts/ProximaNova400.svg#icon') format('svg'); | |
| font-weight: 400; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: ProximaNova; | |
| src: url('https://dmmj3mmt94rvw.cloudfront.net/webfonts/ProximaNova700.eot'); | |
| src: url('https://dmmj3mmt94rvw.cloudfront.net/webfonts/ProximaNova700.eot?#iefix') format('embedded-opentype'), url('https://dmmj3mmt94rvw.cloudfront.net/webfonts/ProximaNova700.woff') format('woff'), url('https://dmmj3mmt94rvw.cloudfront.net/webfonts/ProximaNova700.ttf') format('truetype'), url('https://dmmj3mmt94rvw.cloudfront.net/webfonts/ProximaNova700.svg#icon') format('svg'); | |
| font-weight: 700; | |
| font-style: normal; | |
| } | |
| html { | |
| font-size: 62.5%; | |
| } | |
| body { | |
| font-family: ProximaNova; | |
| font-weight: 300; | |
| font-size: 1.5rem; | |
| line-height: 1.5; | |
| color: #333; | |
| } | |
| body button { | |
| font-family: ProximaNova, sans-serif; | |
| } | |
| body button.btn.btn-social.google_oauth2 { | |
| color: #fff; | |
| background-color: #e11313; | |
| } | |
| body button.btn.btn-social.facebook { | |
| color: #fff; | |
| } | |
| body .image-source-link { | |
| display:none; | |
| } | |
| body .lightbox { | |
| width: auto; | |
| overflow: visible; | |
| margin-left: 0px; | |
| padding-top: 10px; | |
| padding-left: 10px; | |
| box-sizing: border-box; | |
| background-color: #fff !important; | |
| } | |
| body .lightbox-wrapper { | |
| width: auto; | |
| overflow: visible; | |
| margin-left: 0px; | |
| padding-top: 10px; | |
| padding-left: 10px; | |
| box-sizing: border-box; | |
| background-color: #fff !important; | |
| } | |
| body .select2-container { | |
| border-width: 1px !important; | |
| border-color: #000 !important; | |
| } | |
| //alternating colours in list views | |
| .topic-list-item:nth-child(odd) { | |
| background-color: #f4f2f2; | |
| } | |
| body input[type="text"], | |
| body input[type="textarea"], | |
| body input[type="password"], | |
| body input[type="datetime"], | |
| body input[type="datetime-local"], | |
| body input[type="date"], | |
| body input[type="month"], | |
| body input[type="time"], | |
| body input[type="week"], | |
| body input[type="number"], | |
| body input[type="email"], | |
| body input[type="url"], | |
| body input[type="search"], | |
| body input[type="tel"], | |
| body input[type="color"] { | |
| background-color: #fff; | |
| border: 1px solid #e9e9e9; | |
| box-shadow: inset 0 1px 2px 0 rgba(52, 52, 52, 0.25); | |
| font-family: inherit; | |
| font-size: 1em; | |
| } | |
| body input[type="text"]:focus, | |
| body input[type="textarea"]:focus, | |
| body input[type="password"]:focus, | |
| body input[type="datetime"]:focus, | |
| body input[type="datetime-local"]:focus, | |
| body input[type="date"]:focus, | |
| body input[type="month"]:focus, | |
| body input[type="time"]:focus, | |
| body input[type="week"]:focus, | |
| body input[type="number"]:focus, | |
| body input[type="email"]:focus, | |
| body input[type="url"]:focus, | |
| body input[type="search"]:focus, | |
| body input[type="tel"]:focus, | |
| body input[type="color"]:focus { | |
| background-color: #fff; | |
| border-color: #337ab7; | |
| outline: 0; | |
| box-shadow: inset 0 1px 1px rgba(51, 121, 182, 0.1), 0 0 8px #337ab7; | |
| } | |
| body textarea { | |
| background-color: #fff; | |
| } | |
| #main-outlet { | |
| box-sizing: border-box; | |
| width: 100%; | |
| max-width: none; | |
| padding: 82px 0 0 0; | |
| } | |
| .badge-category-bg { | |
| position: relative; | |
| top: 1px; | |
| border-radius: 50%; | |
| } | |
| .badge-wrapper.bullet span.badge-category { | |
| font-size: 1.4rem; | |
| color: #343434 !important; | |
| } | |
| .badge-wrapper.bullet span.badge-category-parent-bg { | |
| display: none; | |
| } | |
| .badge-wrapper.bullet span.badge-category-parent-bg + .badge-category-bg { | |
| width: 10px; | |
| } | |
| .btn { | |
| position: relative; | |
| padding: 10px 15px; | |
| border: 1px solid #ddd; | |
| border-radius: 20px; | |
| background-color: #fbfbfb; | |
| line-height: 20px; | |
| font-weight: 700; | |
| font-size: 1.4rem; | |
| color: #343434; | |
| } | |
| .btn:hover { | |
| background-color: #fbfbfb; | |
| color: #343434; | |
| } | |
| .btn:hover::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 20px; | |
| background-color: #343434; | |
| opacity: 0.05; | |
| pointer-events: none; | |
| } | |
| .btn-primary:active { | |
| background-color: #fbfbfb; | |
| background-image: none; | |
| color: #343434; | |
| } | |
| .groups, | |
| .group-link { | |
| color: #337ab7; | |
| } | |
| a { | |
| color: #337ab7; | |
| } | |
| a:visited { | |
| color: #337ab7; | |
| } | |
| .alert.alert-info { | |
| background-color: #ebf2f8; | |
| border-radius: 6px; | |
| border: 1px solid #337ab7; | |
| padding: 20px; | |
| color: #343434; | |
| } | |
| button[title="topic admin actions"] { | |
| box-sizing: border-box; | |
| width: 42px; | |
| height: 42px; | |
| padding: 0; | |
| } | |
| img.avatar { | |
| border-radius: 50%; | |
| box-shadow: 0 2px 4px 0 rgba(52, 52, 52, 0.25); | |
| } | |
| .accepted-text { | |
| color: #229922; | |
| } | |
| .composer-popup { | |
| background-color: #fff; | |
| box-shadow: 0 2px 4px 0 rgba(52, 52, 52, 0.25); | |
| } | |
| #reply-control { | |
| background-color: #ddd; | |
| opacity: 0.95; | |
| } | |
| #reply-control .grippie { | |
| border-top: 1px solid #ccc; | |
| background: url(/assets/grippie-d28a6f65e22c0033dcf0d63883bcc590.png) #ddd no-repeat center 3px; | |
| } | |
| #reply-control .toggler { | |
| font-size: .75em; | |
| color: #343434; | |
| } | |
| #reply-control .contents .submit-panel { | |
| bottom: 12px; | |
| } | |
| .select2-results .select2-highlighted { | |
| background: rgba(51, 121, 182, 0.1) !important; | |
| } | |
| button:focus { | |
| outline: none; | |
| } | |
| body .bootbox.modal .modal-footer a { | |
| color: #343434; | |
| } | |
| body .bootbox.modal .modal-footer a.btn-primary { | |
| color: #343434; | |
| } | |
| a.mention { | |
| padding: 4px 6px; | |
| color: #337ab7; | |
| background: rgba(51, 121, 182, 0.1); | |
| border-radius: 4px; | |
| border: 1px solid #337ab7; | |
| } | |
| .badge-notification { | |
| line-height: .85; | |
| text-align: center; | |
| padding: 0; | |
| height: 20px; | |
| width: 20px; | |
| line-height: 20px; | |
| border-radius: 10px; | |
| } | |
| .badge-notification.new-posts, | |
| .badge-notification.unread-posts { | |
| background-color: #cc342d; | |
| color: #fff; | |
| font-weight: bold; | |
| text-align: center; | |
| } | |
| .education { | |
| color: #555; | |
| line-height: 1.5; | |
| } | |
| .new-topic.badge-notification { | |
| width: auto; | |
| } | |
| .body-page { | |
| width: calc(100% - 16px); | |
| max-width: 1110px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-left: 0; | |
| } | |
| .body-page .nav-pills { | |
| margin-left: -12px; | |
| } | |
| .body-page .nav-pills li a { | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| color: #343434; | |
| } | |
| .body-page .nav-pills li a:hover { | |
| color: #337ab7; | |
| background-color: rgba(51, 121, 182, 0.1); | |
| } | |
| .body-page .nav-pills li a.active { | |
| background-color: transparent; | |
| color: #337ab7; | |
| } | |
| .search.row, | |
| .search-title, | |
| .fps-result, | |
| .search-footer { | |
| width: calc(100% - 16px); | |
| max-width: 1110px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .search.row + .ember-view { | |
| width: calc(100% - 16px); | |
| max-width: 1110px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| pre code { | |
| word-wrap: break-word; | |
| } | |
| #banner { | |
| width: calc(100% - 16px); | |
| max-width: 1110px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| #top-nav { | |
| display: -ms-flexbox; | |
| display: flex; | |
| background-color: #fbfbfb; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| border-bottom: 1px solid #ddd; | |
| height: 50px; | |
| } | |
| #top-nav a { | |
| display: block; | |
| -ms-flex: 0 0 auto; | |
| flex: 0 0 auto; | |
| padding: 0 20px; | |
| height: 50px; | |
| line-height: 50px; | |
| font-family: ProximaNova, 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| color: #333; | |
| } | |
| #top-nav a.active { | |
| color: #337ab7; | |
| } | |
| #top-nav a:hover { | |
| background-color: rgba(51, 121, 182, 0.1); | |
| color: #337ab7; | |
| } | |
| .category-list .category-description, .category-list .subcategories { | |
| margin-top: 0px; | |
| font-size: 1.3rem; | |
| } | |
| .d-header { | |
| height: 64px; | |
| padding-top: 6px; | |
| background-color: #000; | |
| box-shadow: 0 2px 4px -1px rgba(52, 52, 52, 0.25); | |
| } | |
| .d-header .contents { | |
| margin-top: 4px; | |
| } | |
| .d-header .header-dropdown-toggle { | |
| margin-right: 30px; | |
| } | |
| .d-header .header-dropdown-toggle:last-child { | |
| margin-right: 0; | |
| } | |
| .d-header .fa { | |
| color: #ababab; | |
| } | |
| .d-header #site-logo { | |
| max-height: 45px; | |
| } | |
| .d-header .logo-big { | |
| content: url('https://photochat.co.za/uploads/default/original/1X/9b31da686c603c08853fb942c8797c90e4ef4cf9.jpg'); | |
| margin-top: 2px; | |
| height: 45px; | |
| } | |
| .d-header .logo-small { | |
| content: url('https://photochat.co.za/uploads/default/original/1X/44ac72cbf509ee42caeca948b97466e1c63a0bac.png'); | |
| margin-top: 5px; | |
| height: 30px; | |
| } | |
| .d-header .topic-link { | |
| font-size: 18px; | |
| font-weight: 700; | |
| /**text-transform: uppercase;**/ | |
| color: #e9e9e9; | |
| } | |
| .d-header .badge-wrapper.bullet span.badge-category { | |
| color: #656565 !important; | |
| } | |
| .d-header .title-wrapper h1 { | |
| line-height: 0.8em; | |
| } | |
| .d-header .login-button, | |
| .d-header button.sign-up-button { | |
| padding: 10px 20px; | |
| border: none; | |
| margin-top: 1px; | |
| font-size: 1.4rem; | |
| } | |
| .d-header .login-button:hover::before, | |
| .d-header button.sign-up-button:hover::before { | |
| display: none; | |
| } | |
| .d-header .login-button { | |
| background: transparent; | |
| } | |
| .d-header .login-button .fa { | |
| display: none; | |
| } | |
| .d-header .sign-up-button { | |
| background-color: #229922; | |
| color: #fff; | |
| } | |
| .d-header .icons { | |
| margin-top: -3px; | |
| margin-left: 4px; | |
| } | |
| .d-header .icons li { | |
| margin-right: 20px; | |
| } | |
| .d-header .icons li a.icon { | |
| position: relative; | |
| color: #343434; | |
| } | |
| .d-header .icons li a.icon:hover { | |
| background-color: #fbfbfb; | |
| color: #343434; | |
| } | |
| .d-header .icons li a.icon:hover::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #343434; | |
| opacity: 0.05; | |
| pointer-events: none; | |
| } | |
| .d-header .icons li:first-child { | |
| margin-right: 10px; | |
| } | |
| .d-header .icons li:last-child { | |
| position: relative; | |
| } | |
| .d-header .icons li:last-child a.icon { | |
| margin-left: 3px; | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .d-header .icons li:last-child a.icon:hover { | |
| background-color: transparent; | |
| border-color: transparent; | |
| } | |
| .d-header .icons li:last-child a.icon:hover::before { | |
| display: none; | |
| } | |
| .d-header .icons li:last-child .unread-private-messages { | |
| position: absolute; | |
| left: -4px; | |
| top: -9px; | |
| background-color: #c13737; | |
| color: #000; | |
| } | |
| .d-header .icons .fa { | |
| width: 40px; | |
| height: 40px; | |
| line-height: 40px; | |
| } | |
| .d-header .icons .fa.fa-bars { | |
| font-size: 2rem; | |
| } | |
| .d-header .icons .fa.fa-search { | |
| font-size: 1.8rem; | |
| } | |
| .d-header img.avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| box-shadow: 0 2px 4px 0 rgba(52, 52, 52, 0.25); | |
| } | |
| .d-header .notifications li { | |
| position: relative; | |
| } | |
| .d-header .notifications li:hover { | |
| background-color: rgba(52, 52, 52, 0.05); | |
| } | |
| .d-header .notifications li:hover::before { | |
| content: ""; | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #343434; | |
| opacity: 0.05; | |
| pointer-events: none; | |
| } | |
| .d-header .notifications li.last a:hover { | |
| background: transparent; | |
| } | |
| .d-header .menu-panel { | |
| right: calc(50vw - 555px); | |
| margin-top: 12px; | |
| border-radius: 6px; | |
| padding: 12px; | |
| box-shadow: 0 2px 4px 0 rgba(52, 52, 52, 0.25); | |
| font-size: 1.3rem; | |
| font-weight: bold; | |
| } | |
| @media (max-width: 1110px + 16px) { | |
| .d-header .menu-panel { | |
| right: 0; | |
| margin-right: 12px; | |
| } | |
| } | |
| .d-header .menu-panel ul.menu-links li a:hover { | |
| position: relative; | |
| background-color: #fbfbfb; | |
| } | |
| .d-header .menu-panel ul.menu-links li a:hover::before { | |
| content: ""; | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #343434; | |
| opacity: 0.05; | |
| pointer-events: none; | |
| } | |
| .d-header .user-menu > .menu-panel, | |
| .d-header .hamburger-panel > .menu-panel { | |
| box-shadow: 0 2px 4px 0 rgba(52, 52, 52, 0.25); | |
| } | |
| .d-header .user-menu > .menu-panel li.heading a:hover, | |
| .d-header .hamburger-panel > .menu-panel li.heading a:hover { | |
| background: rgba(52, 52, 52, 0.05); | |
| } | |
| .d-header .user-menu div.menu-links-header a:hover { | |
| background-color: rgba(52, 52, 52, 0.05); | |
| } | |
| .d-header .search-menu .topic-statuses .fa { | |
| color: #ddd; | |
| } | |
| .d-header .search-menu li:not(.category):not(.heading):hover a:not(.badge-notification) { | |
| position: relative; | |
| background-color: transparent; | |
| } | |
| .d-header .search-menu li:not(.category):not(.heading):hover a:not(.badge-notification)::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #343434; | |
| opacity: 0.05; | |
| pointer-events: none; | |
| } | |
| .d-header .search-menu input[type='text'] { | |
| height: 36px; | |
| padding: 12px; | |
| border-radius: 18px; | |
| } | |
| .list-controls { | |
| width: calc(100% - 16px); | |
| max-width: 1110px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-top: 21px; | |
| padding-bottom: 25px; | |
| } | |
| .list-controls .category-breadcrumb .has-drop.bullet { | |
| position: relative; | |
| margin-right: 20px; | |
| padding: 0 15px; | |
| border: 1px solid #ddd; | |
| border-radius: 20px; | |
| background-color: #fbfbfb; | |
| font-weight: 700; | |
| } | |
| .list-controls .category-breadcrumb .has-drop.bullet:hover::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| border-radius: 20px; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #343434; | |
| opacity: 0.05; | |
| pointer-events: none; | |
| } | |
| .list-controls .category-breadcrumb .has-drop.bullet .badge-category { | |
| background-color: transparent !important; | |
| padding: 10px 0 !important; | |
| text-transform: capitalize; | |
| color: #343434 !important; | |
| font-size: 1.4rem; | |
| } | |
| .list-controls .category-breadcrumb .has-drop.bullet .badge-category .fa { | |
| font-weight: 700; | |
| } | |
| .list-controls .category-breadcrumb .has-drop.bullet .category-dropdown-button { | |
| padding-left: 15px !important; | |
| } | |
| .list-controls .category-breadcrumb .fa-caret-right::before { | |
| content: "\f106"; | |
| } | |
| .list-controls .category-breadcrumb .fa-caret-down::before { | |
| content: "\f107"; | |
| } | |
| .list-controls .nav-pills { | |
| margin-bottom: 0; | |
| font-weight: 700; | |
| } | |
| .list-controls .nav-pills a { | |
| padding: 11px 12px; | |
| font-size: 1.4rem; | |
| color: #343434; | |
| } | |
| .list-controls .nav-pills a:hover { | |
| background-color: rgba(51, 121, 182, 0.1) !important; | |
| color: #337ab7; | |
| } | |
| .list-controls .nav-pills .active a { | |
| background-color: transparent; | |
| color: #337ab7; | |
| } | |
| .list-controls #create-topic { | |
| margin: 0; | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| } | |
| .list-controls #create-topic .fa { | |
| display: none; | |
| } | |
| .list-controls .open > .dropdown-menu { | |
| margin-top: 18px; | |
| border-radius: 6px; | |
| padding-left: 6px; | |
| box-shadow: 0 2px 4px 0 rgba(52, 52, 52, 0.25); | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| } | |
| .list-controls .open > .dropdown-menu li > a:hover { | |
| color: #337ab7; | |
| background-color: rgba(52, 52, 52, 0.05); | |
| } | |
| .list-controls .category-dropdown-menu { | |
| left: 0; | |
| margin-top: 6px; | |
| border-radius: 6px; | |
| padding: 12px; | |
| box-shadow: 0 2px 4px 0 rgba(52, 52, 52, 0.25); | |
| } | |
| .list-container { | |
| width: calc(100% - 16px); | |
| max-width: 1110px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .topic-list .btn { | |
| border: none; | |
| } | |
| .topic-list .btn:hover::before { | |
| display: none; | |
| } | |
| .topic-list th { | |
| position: relative; | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| color: #343434; | |
| } | |
| .topic-list th .bulk-select .fa { | |
| color: #ddd; | |
| } | |
| .topic-list th.sortable:hover { | |
| background-color: #fbfbfb; | |
| } | |
| .topic-list th.sortable:hover::before { | |
| content: ""; | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #343434; | |
| opacity: 0.05; | |
| pointer-events: none; | |
| } | |
| .topic-list td { | |
| color: #555; | |
| } | |
| .topic-list td, | |
| .topic-list th { | |
| padding-top: 20px; | |
| padding-bottom: 20px; | |
| } | |
| .topic-list td:first-of-type, | |
| .topic-list th:first-of-type { | |
| padding-left: 0; | |
| } | |
| .topic-list a.title { | |
| font-size: 1.6rem; | |
| color: #343434; | |
| } | |
| .topic-list .topic-statuses { | |
| position: relative; | |
| bottom: 2px; | |
| } | |
| .topic-list .topic-statuses .topic-status { | |
| margin-right: 7px; | |
| } | |
| .topic-list .topic-statuses .topic-status i { | |
| font-size: 1.5rem; | |
| color: #ddd !important; | |
| } | |
| .topic-list .topic-statuses .topic-status i.fa-check-square-o { | |
| color: #229922 !important; | |
| } | |
| .topic-list .topic-excerpt { | |
| font-size: 1.6rem; | |
| line-height: 1.5; | |
| color: #555; | |
| } | |
| .topic-list tbody tr { | |
| border-bottom: 1px solid #ddd; | |
| } | |
| .topic-list tbody tr:first-of-type { | |
| border-top: 2px solid #ddd; | |
| } | |
| .topic-list tbody .num { | |
| font-size: 1.6rem; | |
| color: #343434; | |
| } | |
| .topic-list tbody .num a.badge-posts { | |
| font-weight: 300; | |
| color: #343434; | |
| } | |
| .topic-list tbody .discourse-tag.simple { | |
| font-size: 1.2rem; | |
| color: #555; | |
| } | |
| .topic-list.categories td.category { | |
| padding: 15px; | |
| line-height: 1.5; | |
| } | |
| .topic-list.categories a.title { | |
| color: #337ab7; | |
| } | |
| .topic-list.categories table.categoryStats td { | |
| padding: 4px; | |
| } | |
| .topic-list .badge-notification.new-topic { | |
| color: #337ab7; | |
| font-size: 1.1rem; | |
| text-transform: uppercase; | |
| position: relative; | |
| top: 0; | |
| } | |
| .topic-list .badge-notification.new-topic::before { | |
| position: relative; | |
| bottom: 1px; | |
| } | |
| .topic-list-bottom { | |
| margin-top: 40px; | |
| } | |
| .topic-list-bottom h3 { | |
| font-size: 1.4rem; | |
| line-height: 1.8rem; | |
| color: #343434; | |
| } | |
| .period-chooser .fa-caret-down { | |
| font-size: 1.6rem; | |
| } | |
| .period-chooser #period-popup { | |
| left: 0; | |
| margin-top: 6px; | |
| border-radius: 6px; | |
| padding: 12px; | |
| box-shadow: 0 2px 4px 0 rgba(52, 52, 52, 0.25); | |
| font-size: 1.3rem; | |
| font-weight: 700; | |
| } | |
| .period-chooser #period-popup ul li:hover { | |
| background-color: rgba(52, 52, 52, 0.05); | |
| } | |
| #topic-title { | |
| width: calc(100% - 16px); | |
| max-width: 1110px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| #topic-title h1 { | |
| margin-bottom: 5px; | |
| } | |
| #topic-title .topic-statuses .topic-status { | |
| margin-right: 7px; | |
| } | |
| #topic-title .topic-statuses .fa { | |
| font-size: 1.6rem; | |
| color: #ddd; | |
| } | |
| #topic-title .fancy-title { | |
| font-weight: 300; | |
| font-size: 2.8rem; | |
| line-height: 3.8rem; | |
| color: #343434; | |
| } | |
| #topic-title .edit-topic { | |
| vertical-align: middle; | |
| font-size: 1.6rem; | |
| color: #343434; | |
| } | |
| .posts { | |
| width: calc(100% - 16px); | |
| max-width: 1110px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .posts .topic-body { | |
| width: calc(80% + 40px); | |
| overflow: visible; | |
| margin-left: -60px; | |
| padding-top: 16px; | |
| padding-left: 30px; | |
| box-sizing: border-box; | |
| background-color: #fff !important; | |
| } | |
| .posts .topic-body .contents { | |
| margin-top: 28px; | |
| margin-right: 10px; | |
| margin-left: -10px; | |
| width: calc(100% + 5px); | |
| line-height: 1.5; | |
| } | |
| .posts .topic-body .topic-map { | |
| box-sizing: border-box; | |
| padding: 0 20px; | |
| margin-left: -15px; | |
| width: calc(100% + 45px); | |
| max-width: 576px; | |
| background-color: #fbfbfb; | |
| border-radius: 6px; | |
| border: 1px solid #ddd; | |
| } | |
| .posts .topic-body .topic-map .btn { | |
| border: none; | |
| background-color: transparent; | |
| } | |
| .posts .topic-body .topic-map .btn:hover { | |
| background-color: transparent; | |
| } | |
| .posts .topic-body .topic-map .btn:hover::before { | |
| display: none; | |
| } | |
| .posts .topic-body .topic-map .btn .fa { | |
| font-size: 0.8rem; | |
| color: #343434; | |
| line-height: 88px; | |
| } | |
| .posts .topic-body .topic-map h4 { | |
| margin-bottom: 12px; | |
| text-transform: capitalize; | |
| font-weight: 300; | |
| } | |
| .posts .topic-body .topic-map .map { | |
| width: calc(100% + 40px); | |
| margin-left: -20px; | |
| border-top: none; | |
| } | |
| .posts .topic-body .topic-map .map li { | |
| padding: 20px 20px; | |
| } | |
| .posts .topic-body .topic-map .map li:nth-child(3), | |
| .posts .topic-body .topic-map .map li:nth-child(4), | |
| .posts .topic-body .topic-map .map li:nth-child(5), | |
| .posts .topic-body .topic-map .map li:nth-child(6), | |
| .posts .topic-body .topic-map .map li:nth-child(7) { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column-reverse; | |
| flex-direction: column-reverse; | |
| } | |
| .posts .topic-body .topic-map .map li.avatars { | |
| display: none; | |
| } | |
| .posts .topic-body .topic-map .map .relative-date { | |
| position: relative; | |
| top: 2px; | |
| color: #337ab7; | |
| } | |
| .posts .topic-body .topic-map .map .number { | |
| font-size: 1.6rem; | |
| color: #343434; | |
| } | |
| .posts .topic-body .topic-map .avatars, | |
| .posts .topic-body .topic-map .links { | |
| padding-left: 0; | |
| padding-top: 20px; | |
| padding-right: 10px; | |
| } | |
| .posts .topic-body .topic-map .links h3 { | |
| margin-bottom: 13px; | |
| } | |
| .posts .topic-body .topic-map .links .badge.badge-notification.clicks { | |
| margin-bottom: 13px; | |
| } | |
| .posts .topic-body .solved, | |
| .posts .topic-body .fa.accepted { | |
| color: #229922; | |
| } | |
| .posts .jagged-border { | |
| width: 100%; | |
| } | |
| .posts .names span { | |
| padding-right: 20px; | |
| margin-left: 45px; | |
| font-size: 1.4rem; | |
| } | |
| .posts .post-controls .accepted { | |
| color: #229922; | |
| } | |
| .posts .post-controls button.create { | |
| font-family: inherit; | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| color: #343434; | |
| } | |
| .posts .small-action { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| height: 64px; | |
| border-top: 2px solid #ddd; | |
| border-bottom: 2px solid #ddd; | |
| } | |
| .posts .small-action .topic-avatar { | |
| width: auto; | |
| line-height: 1; | |
| padding: 0; | |
| padding-right: 12px; | |
| -ms-flex: 0 0 auto; | |
| flex: 0 0 auto; | |
| } | |
| .posts .small-action .topic-avatar .fa { | |
| width: auto; | |
| font-size: 1.6rem; | |
| color: #ddd; | |
| } | |
| .posts .small-action-desc { | |
| display: -ms-flexbox; | |
| display: flex; | |
| margin-top: 0; | |
| -ms-flex: 1 0 1px; | |
| flex: 1 0 1px; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| padding: 0; | |
| } | |
| .posts .small-action-desc p { | |
| font-size: 1.4rem; | |
| color: #343434; | |
| -ms-flex: 1 0 auto; | |
| flex: 1 0 auto; | |
| -ms-flex-order: 2; | |
| order: 2; | |
| padding-top: 0; | |
| } | |
| .posts .small-action-desc a { | |
| -ms-flex-order: 1; | |
| order: 1; | |
| -ms-flex: 0 0 auto; | |
| flex: 0 0 auto; | |
| } | |
| .posts .small-action-desc a img { | |
| float: none; | |
| margin-right: 12px; | |
| } | |
| .posts .small-action-desc button { | |
| -ms-flex: 0 0 auto; | |
| flex: 0 0 auto; | |
| -ms-flex-order: 3; | |
| order: 3; | |
| } | |
| .posts .small-action-desc button:first-child { | |
| -ms-flex-order: 4; | |
| order: 4; | |
| } | |
| .posts #topic-progress-wrapper { | |
| width: 100%; | |
| max-width: 1110px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .posts #topic-progress-wrapper.docked { | |
| width: 100%; | |
| left: 0; | |
| right: auto; | |
| transform: none; | |
| } | |
| .posts #topic-progress-wrapper.docked #topic-progress { | |
| border-bottom: 1px solid; | |
| border-bottom-right-radius: 6px; | |
| border-bottom-left-radius: 6px; | |
| } | |
| .posts #topic-progress-wrapper #topic-progress { | |
| position: absolute; | |
| left: auto; | |
| right: 0; | |
| bottom: 0; | |
| border-color: #337ab7; | |
| border-bottom: none; | |
| border-radius: 6px; | |
| border-bottom-right-radius: 0; | |
| border-bottom-left-radius: 0; | |
| background-color: rgba(51, 121, 182, 0.1); | |
| color: #337ab7; | |
| overflow: hidden; | |
| } | |
| .posts #topic-footer-main-buttons { | |
| margin-bottom: 40px; | |
| } | |
| .posts #topic-footer-main-buttons button { | |
| margin-bottom: 0; | |
| } | |
| .posts #topic-footer-buttons .pinned-options.btn-group, | |
| .posts #topic-footer-buttons .notification-options.btn-group { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| margin-bottom: 40px; | |
| } | |
| .posts #topic-footer-buttons .pinned-options.btn-group button.btn, | |
| .posts #topic-footer-buttons .notification-options.btn-group button.btn { | |
| float: none; | |
| margin: 0 20px 0 0; | |
| -ms-flex: 0 0 auto; | |
| flex: 0 0 auto; | |
| } | |
| .posts #topic-footer-buttons .pinned-options.btn-group p, | |
| .posts #topic-footer-buttons .notification-options.btn-group p { | |
| -ms-flex: 1 0 1px; | |
| flex: 1 0 1px; | |
| margin: 0; | |
| } | |
| .posts #suggested-topics > h3 { | |
| margin-top: 25px; | |
| font-size: 1.4rem; | |
| line-height: 1.8rem; | |
| color: #343434; | |
| } | |
| .posts #suggested-topics > h3 .badge-wrapper.bullet { | |
| padding-left: 5px; | |
| line-height: 1.8rem; | |
| } | |
| .posts #suggested-topics > h3 .badge-wrapper.bullet span.badge-category-bg { | |
| position: relative; | |
| top: 2px; | |
| line-height: inherit; | |
| } | |
| .posts #suggested-topics > h3 .badge-wrapper.bullet span.badge-category { | |
| color: #337ab7 !important; | |
| } | |
| .posts .show-topic-admin { | |
| position: fixed; | |
| } | |
| .modal.login-modal #login-buttons .btn.github, | |
| .create-account #login-buttons .btn.github { | |
| background-color: #fbfbfb; | |
| color: #343434; | |
| } | |
| .modal.login-modal #login-buttons .btn.github:hover::before, | |
| .create-account #login-buttons .btn.github:hover::before { | |
| content: "\f09b"; | |
| position: static; | |
| display: inline; | |
| margin-right: 9px; | |
| background-color: transparent; | |
| opacity: 1; | |
| font-family: FontAwesome; | |
| font-size: 1.7rem; | |
| } | |
| .modal.login-modal #login-buttons .btn.github:hover::after, | |
| .create-account #login-buttons .btn.github:hover::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 20px; | |
| background-color: #343434; | |
| opacity: 0.05; | |
| pointer-events: none; | |
| } | |
| .modal.login-modal #login-link, | |
| .create-account #login-link { | |
| display: none; | |
| } | |
| .modal.login-modal #new-account-link, | |
| .create-account #new-account-link { | |
| padding-left: 15px; | |
| } | |
| section.user-main { | |
| margin-top: -12px; | |
| text-align: left; | |
| } | |
| section.user-main .btn { | |
| border: none; | |
| background-color: transparent; | |
| } | |
| section.user-main .btn:hover { | |
| background-color: transparent; | |
| color: #343434; | |
| } | |
| section.user-main .btn:hover::before { | |
| display: none; | |
| } | |
| section.user-main .about { | |
| background-color: #fbfbfb; | |
| } | |
| section.user-main .about .btn { | |
| padding-right: 0; | |
| text-align: right; | |
| } | |
| section.user-main .about .btn .fa { | |
| display: none; | |
| } | |
| section.user-main .about .btn-danger { | |
| color: #343434; | |
| } | |
| section.user-main .about .btn-danger:hover { | |
| color: #343434; | |
| } | |
| section.user-main .about .details { | |
| margin-top: -200px; | |
| padding: 40px 0; | |
| background-color: rgba(251, 251, 251, 0.85); | |
| border-bottom: 1px solid #ddd; | |
| } | |
| section.user-main .about .details .primary { | |
| width: calc(100% - 16px); | |
| max-width: 1110px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| float: none; | |
| color: #343434; | |
| } | |
| section.user-main .about .details .primary .avatar { | |
| margin-right: 40px; | |
| } | |
| section.user-main .about .details .controls { | |
| padding-bottom: 0; | |
| } | |
| section.user-main .about .details .controls li a { | |
| padding-top: 0; | |
| } | |
| section.user-main .about .details .controls li:last-child a { | |
| padding-bottom: 0; | |
| margin-bottom: 0; | |
| } | |
| section.user-main .about .details .primary .primary-textual h1 { | |
| padding: 12px; | |
| text-align: left; | |
| text-transform: uppercase; | |
| font-size: 1.6rem; | |
| color: #343434; | |
| } | |
| section.user-main .about .details .primary .primary-textual h2 { | |
| display: none; | |
| } | |
| section.user-main .about .details .primary .primary-textual h3 { | |
| text-align: left; | |
| } | |
| section.user-main .about .details .primary .primary-textual h3:first-of-type { | |
| text-transform: uppercase; | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| color: #555; | |
| } | |
| section.user-main .about .details .primary .primary-textual .bio { | |
| font-family: ProximaNova, sans-serif; | |
| color: #555; | |
| text-align: left; | |
| } | |
| section.user-main .about .details .primary .primary-textual a[href] { | |
| color: #343434; | |
| } | |
| section.user-main .about .secondary { | |
| background-color: #fff; | |
| } | |
| section.user-main .about .secondary dl { | |
| box-sizing: border-box; | |
| padding: 20px 0; | |
| width: calc(100% - 16px); | |
| max-width: 1110px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| text-align: left; | |
| } | |
| section.user-main .about .secondary dl > button { | |
| float: right; | |
| color: #cc342d; | |
| } | |
| section.user-main .about .secondary dt, | |
| section.user-main .about .secondary dd { | |
| color: #555; | |
| } | |
| section.user-main .about .secondary dt { | |
| text-transform: capitalize; | |
| } | |
| section.user-main .about .secondary dt::after { | |
| content: " -"; | |
| } | |
| section.user-main .about.collapsed-info .details { | |
| background: rgba(251, 251, 251, 0.85); | |
| } | |
| section.user-main .about.collapsed-info .details .controls ul a { | |
| padding-right: 0; | |
| padding-left: 20px; | |
| } | |
| section.user-main .user-navigation { | |
| display: inline-block; | |
| max-width: 230px; | |
| float: none; | |
| text-align: left; | |
| margin-right: 3.6%; | |
| } | |
| section.user-main .user-navigation ul { | |
| margin-bottom: 0; | |
| background-color: #fbfbfb; | |
| } | |
| section.user-main .user-navigation .fa { | |
| display: none; | |
| } | |
| section.user-main .user-navigation li { | |
| border: 1px solid #ddd; | |
| border-bottom: none; | |
| font-weight: 700; | |
| } | |
| section.user-main .user-navigation li:first-child { | |
| border-top-right-radius: 6px; | |
| border-top-left-radius: 6px; | |
| } | |
| section.user-main .user-navigation li:first-child a { | |
| border-top-right-radius: 6px; | |
| border-top-left-radius: 6px; | |
| } | |
| section.user-main .user-navigation li:last-child { | |
| border-bottom: 1px solid #ddd; | |
| border-bottom-right-radius: 6px; | |
| border-bottom-left-radius: 6px; | |
| } | |
| section.user-main .user-navigation li:last-child a { | |
| border-bottom-right-radius: 6px; | |
| border-bottom-left-radius: 6px; | |
| } | |
| section.user-main .user-navigation li.active { | |
| background-color: rgba(51, 51, 51, 0.05); | |
| } | |
| section.user-main .user-navigation li.active a { | |
| background-color: transparent; | |
| color: #343434; | |
| } | |
| section.user-main .user-navigation li.active a::after { | |
| display: none; | |
| } | |
| section.user-main .user-navigation li a { | |
| padding: 12px 16px; | |
| font-size: 1.4rem; | |
| line-height: 1.8rem; | |
| } | |
| section.user-main .user-navigation li a.active { | |
| background-color: transparent; | |
| color: #337ab7; | |
| } | |
| section.user-main .user-navigation li a.active::after { | |
| display: none; | |
| } | |
| section.user-main .user-navigation h3 { | |
| margin-top: 40px; | |
| font-size: 1.4rem; | |
| padding-left: 16px; | |
| } | |
| section.user-main .user-right { | |
| display: inline-block; | |
| width: 75.67927928%; | |
| max-width: 840.04px; | |
| vertical-align: top; | |
| float: none; | |
| text-align: left; | |
| } | |
| section.user-main .user-right .new-private-message { | |
| position: relative; | |
| margin-bottom: 20px; | |
| border: 1px solid #ddd; | |
| background-color: #fbfbfb; | |
| padding: 12px 16px; | |
| font-size: 1.4rem; | |
| line-height: 1.8rem; | |
| } | |
| section.user-main .user-right .new-private-message:hover::before { | |
| content: ""; | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: #343434; | |
| opacity: 0.05; | |
| } | |
| section.user-main .user-right .new-private-message .fa { | |
| display: none; | |
| } | |
| section.user-main .user-right .control-group .controls .static, | |
| section.user-main .user-right .control-group .controls .btn-small { | |
| vertical-align: top; | |
| } | |
| section.user-main .user-right .control-group .controls .btn-small { | |
| padding-top: 0; | |
| } | |
| section.user-main .user-right .user-stream .avatar-link { | |
| margin-right: 12px; | |
| } | |
| section.user-main .user-right .user-stream .excerpt { | |
| color: #343434; | |
| margin: 12px 0; | |
| padding-left: 57px; | |
| } | |
| section.user-main .user-archive { | |
| margin-top: 40px; | |
| } | |
| section.user-main .user-archive button { | |
| padding: 0; | |
| font-weight: 300; | |
| font-size: 1.4rem; | |
| line-height: 1.8rem; | |
| color: #337ab7; | |
| } | |
| .admin-content { | |
| width: calc(100% - 16px); | |
| max-width: 1110px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .user-table { | |
| width: 70%; | |
| background-color: #f8f8f8; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
not good