/*!
* 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-top: 8px; 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; min-width: 260px; width: 15%; padding: 10px 1%; vertical-align: top;
}
.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%; } }
}