/*! * Decko: [[https://decko.org]] * Copyright 2015 Grass Commons and other contributors; Licensed GPL */ /* These styles are intended to help bridge the default card context with bootstrap styling. Note: these styles do not appear in pre-bootstrap skins. */ $label_color: $gray-600; $header_color: $gray-200; $credit_color: $primary; // $bar-border-color: $grey-100; // $box-border-color: $grey-100; $bar_stripe_color: $gray-700; $box_stripe_color: $gray-700; header { a { font-size: 1.3em; } } .d0-card-header a { color: $body-color; &.edit-link, &.bridge-link, &.help-link { color: $text-muted; } } @media print { header { display: none; } } label, .navbox-item-label { // color: $label_color; } table { border-collapse: collapse; } th { color: $label_color; font-weight: normal; font-style: italic; } td, th { vertical-align: top; padding: 0px; } a:link, a:visited { text-decoration: none; } a:hover, a:focus { text-decoration: underline; } form { margin: 0px; padding: 0px; } .link-muted { color: $text-muted; &:hover { color: inherit; } } .grow-1 { flex-grow: 1; } .grow-2 { flex-grow: 2; } /*-------- Special Pages --------*/ /*-- sign in page --*/ #sign-in input#login_field, #sign-in input#password, #forgot-password input#email { width: 50%; } #forgot-password { margin-top: 40px; } body.mceContentBody { margin: 4px; } /*----------- Navbox --------------*/ .select2-navbox-dropdown > .select2-results > .select2-results__options { max-height: none !important; } .navbox-form { min-width: 50%; .select2-container { width: 100% } } /*----------- Sidebar -------------*/ .row.row-offcanvas { > aside, article { margin: 0; } } /* collapsed sidebar styles */ @media screen and (max-width: 576px) { .row-offcanvas { position: relative; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .sidebar-offcanvas-right { right: -41.6%; } .sidebar-offcanvas-left { left: -41.6%; } .row-offcanvas.right-active { right: 41.6%; } .row-offcanvas.left-active { left: 41.6%; } .sidebar-offcanvas { position: absolute !important; top: 0 !important; width: 41.6% !important; } } .offcanvas-toggle { font-size: 10px !important; padding: 5px !important; margin-bottom: 15px !important; } /*---------- Card menu ------------*/ @include media-breakpoint-up(xs) { .card-slot > .d0-card-frame > .d0-card-header, .card-slot > .d0-card-header, .card-slot.labeled-view > .labeled-content > .d0-card-body, .card-slot, .card > .card-body, .card > .card-header { > .card-menu._show-on-hover > a { display: none; } } .card-slot:hover > .d0-card-frame > .d0-card-header, .card-slot:hover > .d0-card-header, .card-slot.labeled-view:hover > .labeled-content > .d0-card-body, .card-slot:hover, .card:hover > .card-body, .card:hover > .card-header{ > .card-menu._show-on-hover > a { display: inline-block; } } } /*----------- Change View ---------*/ .change-view { padding: 5px 0px; border-bottom: 1px dotted $border-color; .change-card{ font-weight: bold; } .last-update { color: $label_color; } } .titled-view > .d0-card-header > { > .d0-card-header-title .card-title { font-size: 1.3em; } margin: 3px 0 } /*---------- ( Richtext )-------------*/ .table-of-contents { background: $header_color; -moz-border-radius: 10px; border-radius: 10px; padding: 4px; margin: 5px 20px 20px 20px; h5 { margin: 0 0 0 40px; } ol { list-style-type: upper-roman; ol { list-style-type: upper-alpha; padding-left: 25px } } } /*---------- ( Link list )-------------*/ .group-text-middle { border-left: none; border-right: none; } .group-text-left { border-right: none; } .group-text-right { border-left: none; } /* CARDTYPE_SPECIFIC ------------------------------*/ .TYPE-toggle.d0-card-content { font-style: italic; } .TYPE-image.d0-card-content, .TYPE-image .d0-card-body { img { max-width: 100%; } } /*---------( Search ) ---------- */ .search-keyword { font-style: italic; } .search-count { float: right; color: $label_color; } /*----------- (Account Request)--------------*/ .invite-links { padding: 10px; margin-top: 10px; background: $header_color; text-align: center; } .invite-links a { font-weight: bold; margin: 0 20px; } /*---------- comments -------------------------------------- */ .comment-box { padding: 0.5em 0; input { padding: 0px; } textarea { margin-bottom:5px; } } .w-comment-author { font-style: italic; margin-left: 10px; } .SELF-Xlogo.content_panel-view, .SELF-Xcredit.content_panel-view { text-align: center; background: $white; img { max-width: 100%; } a { color: $credit_color; } } .closed-content { font-size: 1em !important; padding:10px; } /* english content in css. ugh */ .search-no-results:after { content:'0 results'; } .closed-content .search-no-results:after { content:''; } /*---------- Modal Window -------------------------------------- */ .modal-menu .close{ font-size: 16px; // margin-left: 10px; } .modal-dialog.modal-full { max-width: 99%; margin: 1%; } /*-------- Help Texts --------*/ .alert-info p:last-child { margin-bottom: 0; } /*-------- Icon Helpers --------*/ .toggler>i.material-icons{ color: $black; font-size: 15px; font-weight: bolder!important; border: 2px solid $black; border-radius: 3px; margin-right: 3px; } /* Material icon placement */ .material-icons { vertical-align: sub; font-size: medium; } /* Rules for sizing the icon. */ .material-icons.md-18 { font-size: 18px; } .material-icons.md-24 { font-size: 24px; } .material-icons.md-36 { font-size: 36px; } .material-icons.md-48 { font-size: 48px; } /* Rules for using icons as black on a light background. */ .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } /* Rules for using icons as white on a dark background. */ .material-icons.md-light { color: rgba(255, 255, 255, 1); } .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } /*----------- Borders -------------*/ .border-all{ border-width: 1px; border-style: solid; } .select2-container--bootstrap .select2-navbox-autocomplete.select2-selection--multiple { .select2-selection__choice { background: none !important; border: none !important; } .select2-selection__choice__remove { display: none !important; } } /*----------- Bars and Boxes -------------*/ .expanded-bar, .box { .unknown-view { // TODO: obviate in ruby with better unknown API display: none; } } .bar { border-left: 3px solid $bar_stripe_color !important; .bar-nav { width: 20px; margin-left: auto; } .media { width: 100% } .media-left { max-width: 25% } .bar-body { display: flex; } .bar-left, .bar-right, .bar-middle { display: flex; padding: 0.5rem; flex-wrap: wrap; align-items: center; } .bar-left { font-weight: bold; align-items: flex-start; } .bar-middle { display: none; justify-content: center; } .bar-right { justify-content: flex-end; } } @include media-breakpoint-up(md) { .bar .bar-middle { display: flex; } } .bar-body { border: 1px solid $border-color; width: calc(100% - 20px) } .bar-nav { display: flex; flex-direction: column; padding-left: 3px; a { color: $text-muted; &:hover { color: $primary; } } } @include media-breakpoint-up(sm) { .bar-nav { display: none; } .bar, .expanded-bar { &:hover .bar-nav { display: flex } } } .collapsed-bar { display: flex; justify-content: space-between; } .expanded-bar { margin: 0.5em 0; display: flex; > .bar-body { > .bar { border-bottom: 1px solid $border-color; display: flex; } > .bar-bottom { padding: 1em 1em 1em 2em; border-top: 0; overflow: hidden; } } } .item-box { display: inline-block; padding: 10px 1%; vertical-align: top; } .box { width: 320px; } .box-top { display: flex; min-height: 60px; flex-direction: column; justify-content: center; overflow: auto; h1, h2, h3, h4, h5, h6, div, span, a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .box-middle { min-height: 180px; img { object-fit: contain; height: 130px; width: 190px; } i { display: flex; justify-content: center; min-height: 130px; align-items: center; font-size: 70px; color: $text-muted; } overflow: hidden; text-overflow: ellipsis; } .box-bottom { display: flex; align-items: center; justify-content: space-between; } .badge { vertical-align: text-top!important; } /*----------- Slim Select2 -------------*/ .slim-select2 { .select2-container--bootstrap { .select2-selection, &.select2-container--open .select2-selection { padding-top: 2px; height: 1.5rem; } .select2-selection--single .select2-selection__rendered { font-size: 80%; } .select2-results__option { font-size: 80%; } } }