View file public/assets/css/main.css

File size: 6.21Kb
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,700i&display=swap');

html {
    font-size: 0.9rem;
}

.body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a {
    color: #297dad;
    text-decoration: none;
}

.app {
    background-color: #f9f9fb;
}

@media (max-width: 768px) {
    .app {
        padding: 10px !important;
    }
}

.app-title {
    padding-bottom: 1rem;
}

.app-title h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 400;
}

.section {
    background: rgba(var(--bs-body-bg-rgb), 0.9);
    border-radius: 5px;
}

.section h3 {
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .section {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

.post-author {
    font-weight: bold;
}

.post-message {
    overflow-wrap: break-word;
}

.breadcrumb {
    margin-bottom: 0;
    font-size: 13px;
    padding: 0;
    text-align: left;
    background-color: transparent;
    margin-top: 10px;
}

.media-file {
    max-width: 600px;
    margin: 1rem 0;
}

.upload-file {
    margin-right: 0.25rem;
    background-color: #f5f5f5;
    padding: 1rem 0.5rem;
    display: inline;
    border: 1px solid #dee2e6;
    font-size: 0.8rem;
    font-weight: bold;
}

.spoiler {
    margin-bottom: 5px;
}

.spoiler:before {
    content: "\F231";
    font-family: "bootstrap-icons";
    color: #bbb;
    vertical-align: -0.2em;
}

.spoiler.spoiler-open:before {
    content: "\F229";
}

.spoiler-title {
    border-bottom: 1px dashed;
    color: #6da3bd;
    cursor: pointer;
    font-weight: normal;
}

.spoiler-text {
    padding: 10px 15px;
    margin: 5px 0;
    background-color: #f7f7f9;
}

.hidden-text {
    padding: 10px 15px;
    margin: 5px 0;
    background-color: #f7f7f9;
}

.post-rating-up.active {
    color: #fff;
    background-color: #78c062;
    padding: 0 3px;
    display: inline-block;
    border-radius: 3px;
}

.post-rating-down.active {
    color: #fff;
    background-color: #f75c48;
    padding: 0 3px;
    display: inline-block;
    border-radius: 3px;
}

.cursor-pointer {
    cursor: pointer;
}

textarea.form-control {
    resize: vertical;
}

.blockquote:before {
    content: "\F6B0";
    line-height: 1.0em;
    font-size: 130%;
    font-family: "bootstrap-icons";
    font-weight: 900;
    float: left;
    margin-right: 10px;
}

.blockquote {
    padding: 8px 15px;
    font-size: 95%;
    background: var(--base-bg);
    border-left: 5px solid;
    border-color: rgba(var(--bd-blue-rgb), 0.5);
    font-style:italic;
}

.blockquote-footer {
    margin: 0;
}

.avatar-default {
    color: #fff;
    display: inline-block;
    font-size: 42px;
    font-weight: 700;
    height: 64px;
    text-align: center;
    text-decoration: none;
    width: 64px;
}

.avatar-medium>.avatar-default {
    font-size: 22px;
    height: 32px;
    width: 32px;
}

.avatar-micro>.avatar-default {
    font-size: 14px;
    height: 20px;
    width: 20px;
}

@media (max-width: 768px) {
    .pagination .page-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.7875rem;
        line-height: 1.5;
    }
}

.app-search {
    position: relative;
}

.app-search-input {
    padding: 5px 30px 5px 10px;
    transition: background-color .3s ease;
}

.app-search-button {
    background: 0 0;
    border: 0;
    padding: 0 10px;
    position: absolute;
    right: 0;
    top: 7px;
}

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

.bd-navbar{
    padding: .75rem 0;
    background-color: transparent;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(255,255,255,0.15)
}
.bd-navbar::after {
    position:absolute;
    inset:0;
    z-index:-1;
    display:block;
    content:"";
    background-image:linear-gradient(to bottom, rgba(var(--bd-blue-rgb), 1), rgba(var(--bd-blue-rgb), 0.95))
}
@media (max-width: 991.98px){
    .bd-navbar .bd-navbar-toggle{
        width:4.25rem
    }
}
.bd-navbar .navbar-toggler{
    padding:0;margin-right:-.5rem;border:0
}
.bd-navbar .navbar-toggler:first-child{
    margin-left:-.5rem
}
.bd-navbar .navbar-toggler .bi{
    width:1.5rem;height:1.5rem
}
.bd-navbar .navbar-toggler:focus{
    box-shadow:none
}
.bd-navbar .navbar-brand svg{
    color:#fff;transition:.2s ease-in-out transform
}
.bd-navbar .navbar-brand svg:hover{
    transform:rotate(-60deg) scale(1.1)
}
.bd-navbar .navbar-toggler,
.bd-navbar .nav-link{
    color:rgba(255,255,255,0.85)
}
.bd-navbar .navbar-toggler:hover,
.bd-navbar .navbar-toggler:focus,
.bd-navbar .nav-link:hover,
.bd-navbar .nav-link:focus{
    color:#fff
}

.bd-navbar .navbar-toggler.active,
.bd-navbar .nav-link.active{
    font-weight:600;color:#fff
}

.bd-navbar .offcanvas-lg{
    background-color:var(--bd-blue-bg);
    border-left:0
}
@media (max-width: 991.98px){
    .bd-navbar .offcanvas-lg{
        box-shadow:0 1rem 3rem rgba(var(--bs-body-color-rgb), 0.175)
    }
}
.bd-navbar .dropdown-toggle:focus:not(:focus-visible){
    outline:0
}
.bd-navbar .dropdown-menu{
    --bs-dropdown-min-width: 12rem;
    --bs-dropdown-padding-x: .25rem;
    --bs-dropdown-padding-y: .25rem;
    --bs-dropdown-link-hover-bg: rgba(var(--bd-blue-rgb), .1);
    --bs-dropdown-link-active-bg: rgba(var(--bd-blue-rgb), 1);
    --bs-dropdown-font-size:.875rem;font-size:.875rem;
    border-radius:.5rem;
    box-shadow:0 0.5rem 1rem rgba(var(--bs-body-color-rgb), 0.15)
}
.bd-navbar .dropdown-menu li+li{
    margin-top:.125rem
}
.bd-navbar .dropdown-menu .dropdown-item{
    border-radius:.25rem
}
.bd-navbar .dropdown-menu .dropdown-item:active .bi{
    color:inherit !important
}
.bd-navbar .dropdown-menu .active{
    font-weight:600
}
.bd-navbar .dropdown-menu .active .bi{
    display:block !important
}
[data-bs-theme="dark"] .bd-navbar{
    box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15),inset 0 -1px 0 rgba(255,255,255,0.15)
}

.bd-gutter {
    --bs-gutter-x: 3rem;
}
.bi{width:1em;height:1em;vertical-align:-.125em;fill:currentcolor}

@media (min-width: 992px) {
    .bd-navbar .navbar-brand span {
        display: none;
    }
}