/* License: */ /*------------------------------------------------------------------ [Table of contents] 1. imports and font-face 2. Mobile page layouts 3. Header styles 4. Forum styles 4.1 tables, navigation list, pagination 4.2 comment views 4.3 Attachments 4.4 Users online palette 4.5 Forum topic 5. Bootstrap form styles additions and overrides 6. @media (min-width: 700px) and (min-width: 40em) -------------------------------------------------------------------*/ /* * 1. imports and font-face --------------------------------------- */ @import url(../../css/libertine.css); @font-face { font-family: 'EuphoriaScript'; src: url("../../fonts/euphoriascript-regular.ttf") format("truetype"); } /* * 2. Mobile page layouts ----------------------------------------- */ $gutters: 1vw; // override bootstrap .panel-body { padding: 1vw 0; } .container { padding: 0; } .forums-header { border-collapse: collapse; border-spacing: 0; table-layout: fixed; width: 100%; } .forums-branding{ grid-area: branding; } .forums-search { grid-area: search; } .user-menu { grid-area: usermenu; } .forum-sub-header { border-top: 1px solid #444; grid-area: breadcrumb; padding: 0; a { display: inline-block; } img { max-height: 40px; padding: 5px 4px 8px $gutters; } } .forum-sidebar { grid-area: sidebar; } .forum-content { grid-area: content; padding: 1vw; } .forum-footer { grid-area: footer; } .comment-header-group { border-radius: 5em; border-top-right-radius: 1em; border-bottom-right-radius: 1em; display: inline; float: left; line-height: 23px; margin: 0; padding: 0 1vw 0 0; position: relative; width: calc(100% - 5em); z-index: 5; } .comment { margin-bottom: 4em; } .comment-author-address { display: inline; font-weight: bold; line-height: 2; margin-bottom: 0; /* align with comment-text */ padding-left: 2.4vw; } .not-visible .img-circle { max-width: 50px; padding: 0; } .img-circle { border-radius: 50%; display: inline; float: left; height: 80px; max-height: 30vw; max-width: 30vw; object-fit: cover; padding: 10px; transition: padding .3s ease 0s; vertical-align: top; width: 80px; } .comment-author:focus .img-circle, .comment-author:hover .img-circle { padding: 0; } .comment-time { border-radius: 2em; margin-bottom: 1em; padding: .2em .6em .1em; } .comment-author-address img.emoji { margin-left: .4em; padding: .4em; position: relative; top: -.8em; /* don't mess up vertical position of surrounding text */ vertical-align: text-top; width: 2.6em; } .buttons-group { float: right; position: relative; top: -.6em; text-align: center; width: 3em; } .comment-text { clear: both; padding: 1em 0; } /* * 3. Header styles ------------------------------------------- */ %blackgrad-bg { background: #4d4d4d; background-image: linear-gradient(to bottom, #4d4d4d 0%, #1a1a1a 100%); border-bottom: 1px solid #262626; } .forums-header { @extend %blackgrad-bg; color: #fff; a { color: #fff; } } .forums-logo { display: block; height: 100px; padding: $gutters; vertical-align: top; } .forums-logo:focus, .forums-logo:hover { text-decoration: none; text-shadow: 0 0 3px orange; } .forums-logo img { float: left; margin: 0 10px 0 0; height: 80px; transform: translateZ(0) rotateZ(0); transition: transform 1s ease 0s; } .forums-logo:focus img, .forums-logo:hover img { transform: translateZ(0) rotateZ(-360deg); } .forums-name { display: block; margin-top: 12px; font-family: LinuxLibertineDisplayORegular, "Trebuchet MS", Ubuntu, "Liberation Sans", FreeSans, sans-serif; font-weight: normal; text-transform: uppercase; font-size: 22px; font-weight: 300; line-height: 1.3; color: #fff; } .forums-tagline { color: #fff; font-size: 22px; font-weight: normal; font-family: EuphoriaScript; } .forums-search { padding: $gutters; } .forums-search .sr-input { border: medium none; border-radius: 4px 0 0 4px; box-shadow: none; color: #8a8a8a; float: left; height: 40px; padding: 0 10px; } .forums-search .sr-btn { background: none repeat scroll 0 0 #ff7e28; border: medium none; border-radius: 0 4px 4px 0; color: #fff; height: 40px; padding: 0 20px; } .user-menu { padding: $gutters; text-align: right; li { display: inline-block; margin: 0 0 0 1em; } .glyphicon { margin-right: .1em; transform: scale(1) translateZ(0); transition: transform .3s ease 0s; } a:focus, a:hover { color: orange; outline: none; .glyphicon { transform: scale(1.4) translateZ(0) translateY(-.6em) rotateZ(30deg); } } } .forum-sub-header { a { color: #fff; } img { transform: scale(1) translateZ(0) translateX(0); transition: transform .3s ease 0s; } a:focus, a:hover { img { transform: scale(1.6) translateZ(0) translateY(-.6em) rotateZ(30deg); } } } .forum-name { font-size: 1.3em; font-weight: bold; } .forum-description { color: #428bca; cursor: help; display: block; padding: 0 $gutters .4em; transition: color .3s ease .4s; &:hover { color: orange; } } .forum-thread-title { color: orange; font-size: 1.3em; font-weight: bold; } /** * 4. Forum styles ------------------------------------------------ */ .forum-item.old { font-weight: normal; } .forum-item.new { font-weight: bold; } .table-forum tr.old .topic-item { font-weight: normal; } .table-forum tr.new .topic-item { font-weight: bold; } .forum-sidebar { background: none repeat scroll 0 0 #e5e8ef; } .forum-content { background: none repeat scroll 0 0 #fff; } .forum-footer { @extend %blackgrad-bg; text-align: center; } a.forum-dropdown { background: none repeat scroll 0 0 #80d3d9; border-radius: 2px; color: #01a7b3; font-size: 10px; margin-top: 20px; padding: 3px 5px; } .forum-body { padding: 2vw 0; } ul.forum-nav { display: inline-block; margin: 0; padding: 0; width: 100%; } .forum-divider { border-bottom: 1px solid #d5d8df; } ul.forum-nav li { display: inline-block; line-height: 45px; width: 100%; } ul.forum-nav li a { color: #6a6a6a; display: inline-block; line-height: 45px; padding: 0 20px; width: 100%; } .unchanged { font-weight: bold; } #forum-list .forum-item img { width: 22px; margin: -2px 2px 0px 0px; } ul.forum-nav li a i { color: #6a6a6a; font-size: 16px; padding-right: 10px; } ul.forum-nav li a span.label { margin-top: 13px; } ul.labels-info li h4 { color: #5c5c5e; font-size: 13px; padding-left: 15px; padding-right: 15px; padding-top: 5px; text-transform: uppercase; } ul.labels-info li { margin: 0; } ul.labels-info li a { border-radius: 0; color: #6a6a6a; } ul.labels-info li a:hover, ul.labels-info li a:focus { background: none repeat scroll 0 0 #d5d7de; color: #6a6a6a; } ul.labels-info li a i { padding-right: 10px; } .nav.nav-pills.nav-stacked.labels-info p { color: #9d9f9e; font-size: 11px; margin-bottom: 0; padding: 0 22px; } .table-forum .search-context td { border-top: 1px solid #efefef; color: #999; } .table-forum .search-context td .highlighted { background-color: #ffffcc; } .table-forum .avatar { padding: 3px 8px 3px 10px !important; vertical-align: middle; } .table-forum .avatar img { max-width: 37px; max-height: 37px; } .table-forum { border: 1px solid #d3d3d3; margin-bottom: 0; } .table-forum tr td { padding: 12px !important; } .table-forum tr td:hover { cursor: pointer; } .table-forum tr td .fa-star.inbox-started, .table-inbox tr td .fa-star:hover { color: #f78a09; } .table-forum tr td .fa-star { color: #d5d5d5; } .table-forum tr.unread td { background: none repeat scroll 0 0 #f7f7f7; font-weight: 600; } ul.forum-pagination { float: right; } ul.forum-pagination li { float: left; } .forum-option { display: inline-block; margin-bottom: 10px; width: 100%; } .forum-pagination a.np-btn { background: none repeat scroll 0 0 #fcfcfc; border: 1px solid #e7e7e7; border-radius: 3px !important; color: #9f9f9f; display: inline-block; padding: 5px 15px; } .forum-pagination a.np-btn.disabled { opacity: 0.3; } .forum-option .chk-all input[type="checkbox"] { margin-top: 0; } .forum-option .btn-group a.all { border: medium none; padding: 0; } .forum-pagination a.np-btn { margin-left: 5px; } .forum-pagination li span.count { display: inline-block; margin-right: 5px; margin-top: 7px; } .fileinput-button { background: none repeat scroll 0 0 #eeeeee; border: 1px solid #e6e6e6; } .forum-body .modal .modal-body input, .inbox-body .modal .modal-body textarea { border: 1px solid #e6e6e6; box-shadow: none; } .btn-send, .btn-send:hover { background: none repeat scroll 0 0 #00a8b3; color: #fff; } .btn-send:hover { background: none repeat scroll 0 0 #009da7; } .modal-header h4.modal-title { font-family: "Open Sans",sans-serif; font-weight: 300; } .modal-body label { font-family: "Open Sans",sans-serif; font-weight: 400; } .heading-forum h4 { border-bottom: 1px solid #ddd; color: #444; font-size: 18px; margin-top: 20px; padding-bottom: 10px; } .table-forum .text-right { width: 1%; white-space: nowrap; } .view-forum a { color: #ff6c60; } .attachment-forum { margin-top: 30px; } .attachment-forum ul { display: inline-block; margin-bottom: 30px; width: 100%; } .attachment-forum ul li { float: left; margin-bottom: 10px; margin-right: 10px; width: 150px; } .attachment-forum ul li img { width: 100%; } .attachment-forum ul li span { float: right; } .attachment-forum .file-name { float: left; } .attachment-forum .links { display: inline-block; width: 100%; } .fileinput-button { float: left; margin-right: 4px; overflow: hidden; position: relative; } .fileinput-button input { cursor: pointer; direction: ltr; font-size: 23px; margin: 0; opacity: 0; position: absolute; right: 0; top: 0; transform: translate(-300px, 0px) scale(4); } .fileupload-buttonbar .btn, .fileupload-buttonbar .toggle { margin-bottom: 5px; } .files .progress { width: 200px; } .fileupload-processing .fileupload-loading { display: block; } * html .fileinput-button { line-height: 24px; margin: 1px -3px 0 0; } * + html .fileinput-button { margin: 1px 0 0; padding: 2px 15px; } @media (max-width: 767px) { .files .btn span { display: none; } .files .preview * { width: 40px; } .files .name * { display: inline-block; width: 80px; word-wrap: break-word; } .files .progress { width: 20px; } .files .delete { width: 60px; } } ul { list-style-type: none; padding: 0px; margin: 0px; } .highlighted { background-color: yellow; } /* -------------------- 4.2 comment views --------------------- */ .comment { list-style: none; margin: 0; padding: 0; position: relative; /* context for header bg */ } .comment > li { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px dotted #B3A9A9; } .comment > li .comment-body > p { margin: 10px; color: #777777; } .comment .comment-img { min-width: 130px; min-height: 130px; } .comment .comment-img img { max-width: 120px; } .comment .comment-body .header small { padding: 0px 4px; } .panel-resource { text-align: center; display: block; border: 0px; } .panel-resource img { max-width: 100%; max-height: 400px; padding: 1vw 0; } #id_honeypot { display: none; } .input-group { width: 100%; padding: 0px 10px; } .input-group textarea { width: 100%; margin: 6px 0px; padding: 10px; } .emoji-selector .dropdown-menu { padding: 4px; } .emoji-selector .dropdown-menu img { width: 27px; padding: 2px; } .emoji-selector .dropdown-menu img:hover { background-color: #eee; } .emoji-bar { clear: both; display: block; font-size: 1em; margin-top: 1em; } .emoji-bar img.emoji { border-radius: 2em; box-shadow: 0 0 1px 0px #ddd inset; background-color: #EBFCFF; font-size: inherit; margin: 0 0 .3em .3em; padding: .4em; width: 2.6em; } img.emoji { width: 1.6em; } span.emoji i { display: inline-block; padding: 1.7px 5px; font-size: 7px; font-weight: 700; line-height: 1; color: #fff; text-align: center; vertical-align: bottom; background-color: #555; border-radius: 10px; opacity: 0.8; margin-left: -10px; margin-bottom: 2px; } h3 small.label { font-size: 50%; } /* -------------------- 4.3 Attachments --------------------- */ .inline-attachments { padding-top: 0px; margin-bottom: 15px; padding-bottom: 5px; } .inline-attachments .inline { display: inline-block; border: 1px #fafafa solid; padding: 3px; margin: 5px; } .inline-attachments .inline:first-child { margin-left: 0; padding-left: 0; } .inline-attachments .inline img { max-width: 90px; max-height: 90px; } /* -------------------- 4.4 Users online palette --------------------- */ #users-online { padding: 8px; } #users-online li a.me { border-bottom: 1px solid #aaa; display: block; height: initial; width: initial; padding-bottom: 8px; margin-bottom: 5px; } #users-online li a { display: inline-block; padding: 4px; height: 48px; width: 48px; } #users-online li img { border: 1px solid #eee; max-width: 48px; max-height: 48px; border-radius: 6px; } .group-id_honeypot { display: none; } .table-forum .icon { color: #aaa; width: 32px; } .table tr.locked { color: #888; background-color: #eee; } .table tr.locked:hover { background-color: #eee; } .table tr.locked .icon { color: #ccc; } .table tr.locked a { color: #888; } .table tr.sticky { color: #3c763d; background-color: #dff0d8; } .table tr.sticky:hover { background-color: #c4ecb4; } .table tr.sticky a { color: #3c763d; } .table tr.sticky .icon { color: #3c763d; } /* -------------------- 4.5 Forum topic --------------------- */ .forum-comment-first-text { background-color: #f5f5f5; border-radius: 1em; margin-bottom: 2em; padding: 1em; } .forum-comment-first-text .comment-time { margin: 1em 0; } .comment-img { margin: 0 1em .6em 0; } .comment-img .img-circle { background-color: transparent; padding: 0; } .img-circle, .comment-header-group::before, .comment-header-group, .comment-time { background-color: #ebfcff; } .not-public .img-circle, .comment-header-group.not-public::before { background-color: #ffebeb; color: #640000; } .comment-author-address img.emoji { border-radius: 2em; box-shadow: 0 0 1px 0px #ddd inset; background-color: #FFEEEB; font-size: inherit; } .comment-first-link, .comment-count, .comment-remove, .comment-edit, .comment-report { border-radius: 2em; box-shadow: 0 0 1px 0 #ddd inset; display: inline-block; font-size: .8em; line-height: 1; margin-bottom: .4em; padding: .7em .7em .5em; text-align: center; transition: all .3s ease 0s; } .comment-first-link { background-color: #fff; margin: 0 0 .5em .5em; padding: .7em; position: relative; right: -1em; top: -1em; } .comment-count .glyphicon, .comment-remove .glyphicon, .comment-edit .glyphicon, .comment-report .glyphicon { top: 0; /* override bootstrap */ } .comment-count { background-color: #f0ebff; color: #1b006c; margin: 0; padding: .7em .6em .7em; } .comment-count:focus, .comment-count:hover { background-color: #9F80FF; color: #fff; text-decoration: none; } .comment-remove { background-color: #ffebeb; color: #640000; } .comment-edit { background-color: #ebffe1; color: #104600; font-size: 1.3em; } .comment-edit:focus, .comment-edit:hover { background-color: #AAFF80; color: inherit; } .comment-remove:focus, .comment-remove:hover { background-color: #FF8080; color: inherit; } .comment-report:focus, .comment-report:hover { background-color: #FFF100; color: inherit; } .comment-report { background-color: #fff991; color: #402b00; } .emoji-selector .btn { mix-blend-mode: luminosity; padding: 0; } /* * 5. Bootstrap form styles additions and overrides --------------- */ .btn-sm, .btn-group-sm > .btn { border-radius: 2em; } .input-group-btn > .btn { font-weight: bold; letter-spacing: 1px; text-transform: uppercase; } /* * 6. Wider screen layout ----------------------------------------- */ $image-unit: 120px; $image-unit-half: $image-unit / 2; @media (min-width: 700px) and (min-width: 40em) { /* -------------------- main layout ------------------------ */ .forum-box { display: grid; grid-template-areas: "header header" "sidebar content" "footer footer"; grid-template-columns: fit-content(22em) 1fr; } .forums-header { display: grid; grid-area: header; grid-template-columns: 1fr 1fr; grid-template-areas: "branding search" "branding usermenu" "breadcrumb breadcrumb"; } .forum-content { grid-area: content; padding: $gutters 0; } .forum-sidebar { grid-area: sidebar; margin-right: 3*$gutters; } .forum-footer { padding: $gutters 0; } /* -------------------- header layout ---------------------- */ .forums-branding { grid-area: branding; } .forums-search { grid-area: search; } .user-menu { grid-area: usermenu; } .forum-sub-header { border-top: 1px solid #444; grid-area: breadcrumb; } /* -------------------- comment layout --------------------- */ .comment { display: grid; /* .comment-count | .comment-header-group SPANS 3 | .buttons-group SPANS 3 */ grid-template-columns: min-content $image-unit 1fr 1fr max-content max-content max-content; grid-template-rows: 1.8em calc(120px - 3.6em) 1.8em min-content min-content min-content; } .buttons-group { top: 0; width: auto; /* override mobile */ } .comment-count, .comment-remove, .comment-edit, .comment-report { float: right; margin: 0 0 0 .4em; } .comment-edit { position: relative; top: -.5em; } .comment-text { grid-column-start: 3; grid-column-end: span 5; grid-row-start: 2; grid-row-end: span 4; padding: 1.6em 2.4vw .6em; z-index: 5; /* more than .comment-header-group */ } .comment-attachments { grid-column-start: 3; grid-column-end: span 5; grid-row-start: 6; grid-row-end: span 1; margin: 0; padding: 0 2.4vw; } .comment-header-group { background: none; grid-column-start: 2; grid-column-end: span 3; grid-row-start: 1; grid-row-end: span 3; width: auto; /* override mobile */ z-index: 1; /* less than .comment-text */ } /* gives the top background line that goes behind the circle image */ .comment-header-group::before { border-radius: 2em; content: ""; display: block; height: 1.8em; /* half the image width */ left: $image-unit / 2; position: absolute; top: 0; /* subtract half the image width */ width: calc(100% - 60px); z-index: -1; } .img-circle { height: $image-unit; padding: 20px; width: $image-unit; } .comment-time { background-color: transparent; float: right !important; } .buttons-group { grid-column-start: 5; grid-column-end: span 3; grid-row-start: 1; grid-row-end: span 1; margin-top: 0; } .comment-count { grid-column-start: 1; grid-column-end: span 1; grid-row-start: 1; grid-row-end: span 1; justify-self: start; } .comment-footer { grid-column-start: 1; grid-column-end: span 2; grid-row-start: 3; grid-row-end: span 1; } .emoji-selector { grid-column-start: 1; grid-column-end: span 1; grid-row-start: 3; grid-row-end: span 1; } .emoji-bar { grid-column-start: 1; grid-column-end: span 2; grid-row-start: 4; grid-row-end: span 1; align-self: start; justify-self: end; text-align: right; } /* Attachments dropdown */ .check-dropdown { grid-column-start: 1; grid-column-end: span 2; grid-row-start: 5; grid-row-end: span 1; justify-self: center; align-self: center; } }