bynder.css in Bynder 7
form#media-bynder-add {
margin: 0;
}
#edit-bynder-search {
padding: 0;
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 0;
}
#edit-bynder-search a {
color: #1ca0de;
}
#edit-bynder-search .grid-item {
margin: 0;
}
#edit-bynder-search img:hover {
color: #148fc8;
text-decoration: none;
}
#edit-bynder-search .fa-caret-right:before {
display:none;
}
#edit-bynder-search .fieldset-wrapper {
padding: 1em;
padding-top: 0;
}
#edit-bynder-search .bynder-search-form .fieldset-wrapper {
position: relative;
margin: 0 -25px;
padding: 1em 2em;
border-bottom: 1px solid #ddd;
background-color: #f9f9f9;
}
#edit-bynder-search input.form-text {
padding: 10px;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
#edit-bynder-search input.form-text:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
#edit-bynder-search .form-item label {
margin-bottom: 10px;
}
#edit-bynder-search .bynder-search-form {
margin:0;
}
#edit-bynder-search .bynder-search-form legend {
text-align:right;
}
#edit-bynder-search .bynder-search-form .form-type-textfield {
display: inline-block;
}
#edit-bynder-search .normal-facet-list-wrapper {
display:inline-block;
margin: 0.5em 0;
}
#edit-bynder-search h3 {
font-size: 16pt;
margin: 0 0 0.25em;
}
#edit-bynder-search .item-list {
clear:both;
padding: 10px 0 0 0;
}
#edit-bynder-search .item-list:before,
#edit-bynder-search .item-list:after,
#edit-bynder-search .item-list .facet_list:after,
#edit-bynder-search .item-list .facet_list:before {
display: inline-block;
}
#edit-bynder-search .item-list:after,
#edit-bynder-search .item-list .facet_list:after {
clear: both;
}
#edit-bynder-search .item-list .facet_list {
padding-left: 0;
}
#edit-bynder-search .item-list .facet_list .facet_title {
max-height: 290px;
}
#edit-bynder-search .item-list .facet_list .facet_title > .item-list ul {
padding: 0.5em;
vertical-align:top;
margin: 0.1em;
}
#edit-bynder-search ul ul {
overflow-y: auto;
}
#edit-bynder-search .item-list .facet_list .facet_title ul li {
position: relative;
height: 30px;
margin-bottom: 5px;
padding: 0;
line-height: 30px;
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: transparent;
list-style: none;
}
#edit-bynder-search .item-list .facet_list .facet_title ul li:hover {
border-color: #ccc;
background-color: #f9f9f9;
cursor: pointer;
}
#edit-bynder-search .item-list .facet_list .facet_title ul li a {
padding-right: 45px;
padding-left: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#edit-bynder-search .item-list .facet_list .facet_title ul li a.active {
color: #fff;
background-color: #148fc8;
}
#edit-bynder-search .item-list .facet_list .facet_title ul li .count {
position: absolute;
top: 0;
right: 10px;
color: #ccc;
}
#edit-bynder-search .item-list .facet_list .facet_title ul li a:hover {
text-decoration: underline;
}
#edit-bynder-search .item-list .facet_list > .facet_title {
display: inline-block;
margin: 0 1em 0 0;
list-style-type: none;
cursor: pointer;
}
#edit-bynder-search .item-list .facet_list .facet_title > .item-list {
position: absolute;
z-index: 10;
display: none;
overflow: hidden;
background-color: #fff;
border-radius: 0 0 3px 3px;
border: solid thin #ddd;
}
#edit-bynder-search .item-list .facet_list .facet_title > span {
margin-bottom: 10px;
font-weight: bold;
}
#edit-bynder-search .item-list .facet_list .facet_title > span .expand {
float: right;
font-size: 20px;
padding: 0 0.5em;
}
#edit-bynder-search .item-list .selected_facet_list .facet_title > span {
padding: 0.5em;
border: solid thin #ddd;
background:#eee;
}
#edit-bynder-search .item-list .selected_facet_list .facet_title > span .expand {
padding:0;
margin-left:0.5em;
}
#edit-bynder-search input.form-submit {
margin: 0.25em 1em;
display: inline-block;
padding: 0.5em 1em;
color: #fff;
border: 1px solid #148fc8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #1ca0de;
-webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
}
#edit-bynder-search input.form-submit:hover {
background-color: #148fc8;
}
#edit-bynder-search input.form-submit:active {
color: #fff;
text-shadow: 0 0 0 transparent;
}
#edit-bynder-search input.form-submit:focus,
#edit-bynder-search input.form-submit:focus:hover {
color: rgba(255,255,255,0.5);
outline: none;
background-color: #148fc8;
}
.alert {
position: absolute;
top: 25px;
right: 20px;
padding: 15px;
border: 1px solid transparent;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.alert-warning {
font-size: 14px;
color: #8a6d3b;
border-color: #faebcc;
background-color: #fcf8e3;
}
.alert-error {
color: #a94442;
border-color: #ebccd1;
background-color: #f2dede;
}
.alert-success {
color: #3c763d;
border-color: #d6e9c6;
background-color: #dff0d8;
}
body.page-media-browser {
overflow-y: scroll;
}
.media-modal-frame {
height: 800px!important;
}
#edit-search {
border: none;
padding: 0;
}
span#clear-all {
background-color: #1ca0de!important;
}
/* set default standard media queries for responsive grid. */
@media only screen and (min-width: 320px) {
.grid-sizer,
.grid-item {
width: 96%;
}
.gutter-sizer {
width: 20px;
}
}
@media only screen and (min-width: 768px) {
.grid-sizer,
.grid-item {
width: 46%;
}
.gutter-sizer {
width: 20px;
}
}
@media only screen and (min-width: 992px) {
.grid-sizer,
.grid-item {
width: 23%;
}
.gutter-sizer {
width: 10px;
}
}
/* Jump back down for XL screens to better utilize the space. */
@media only screen and (min-width: 1600px) {
.grid-sizer,
.grid-item {
width: 15%;
}
.gutter-sizer {
width: 10px;
}
}
#thumbnails {
margin-top: 2em;
}
.grid-item {
border: 2px solid lightgray;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.13);
float: left;
position: relative;
transition: .2s;
}
.grid-item .form-type-checkbox {
display: none;
}
.grid-item img {
display: block;
width: 100%;
}
.grid-item .more-info {
background: #000000;
background: rgba(0, 0, 0, 0.85);
bottom: 0;
color: whitesmoke;
left: 0;
overflow: hidden;
position: absolute;
transition: .2s;
width: 100%;
}
.grid-item:hover .more-info {
opacity: .15;
}
.grid-item .more-info .name {
margin: 0.5em 0.5em 0 0.5em;
}
.grid-item .more-info .type {
margin: 0 0.5em 0.5em 0.5em;
}
.grid-item.checked:after {
background-size: 54px 54px;
}
.grid-item.item-style {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.grid-item:hover {
border: 2px solid darkgrey;
}
.grid-item.checked {
border: 2px solid darkgrey;
}
.grid-item.checked:after {
background: url("../images/checkmark.svg") no-repeat center center;
content: " ";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.overlay-throbber {
background: #000000;
background: rgba(216, 216, 216, 0.85);
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 1000;
}
.bynder-filters .form-item {
display: inline-block;
vertical-align: top;
}
#edit-search-button {
clear: both;
display: block;
margin-left: 0;
}
.oauth-reload {
display: none;
}
File
css/bynder.css
View source
- form#media-bynder-add {
- margin: 0;
- }
-
- #edit-bynder-search {
- padding: 0;
- overflow: hidden;
-
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- margin: 0;
- }
-
- #edit-bynder-search a {
- color: #1ca0de;
- }
-
- #edit-bynder-search .grid-item {
- margin: 0;
- }
-
- #edit-bynder-search img:hover {
- color: #148fc8;
- text-decoration: none;
- }
-
- #edit-bynder-search .fa-caret-right:before {
- display:none;
- }
-
- #edit-bynder-search .fieldset-wrapper {
- padding: 1em;
- padding-top: 0;
- }
-
- #edit-bynder-search .bynder-search-form .fieldset-wrapper {
- position: relative;
- margin: 0 -25px;
- padding: 1em 2em;
- border-bottom: 1px solid #ddd;
- background-color: #f9f9f9;
- }
-
- #edit-bynder-search input.form-text {
- padding: 10px;
-
- border: 1px solid #ccc;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
- -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
- }
-
- #edit-bynder-search input.form-text:focus {
- border-color: rgba(82, 168, 236, 0.8);
- outline: 0;
- outline: thin dotted \9;
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
- -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(82,168,236,0.6);
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
- }
-
- #edit-bynder-search .form-item label {
- margin-bottom: 10px;
- }
-
- #edit-bynder-search .bynder-search-form {
- margin:0;
- }
-
- #edit-bynder-search .bynder-search-form legend {
- text-align:right;
- }
-
- #edit-bynder-search .bynder-search-form .form-type-textfield {
- display: inline-block;
- }
-
- #edit-bynder-search .normal-facet-list-wrapper {
- display:inline-block;
- margin: 0.5em 0;
- }
-
- #edit-bynder-search h3 {
- font-size: 16pt;
- margin: 0 0 0.25em;
- }
-
- #edit-bynder-search .item-list {
- clear:both;
- padding: 10px 0 0 0;
- }
-
- #edit-bynder-search .item-list:before,
- #edit-bynder-search .item-list:after,
- #edit-bynder-search .item-list .facet_list:after,
- #edit-bynder-search .item-list .facet_list:before {
- display: inline-block;
- }
-
- #edit-bynder-search .item-list:after,
- #edit-bynder-search .item-list .facet_list:after {
- clear: both;
- }
-
- #edit-bynder-search .item-list .facet_list {
- padding-left: 0;
- }
-
- #edit-bynder-search .item-list .facet_list .facet_title {
- max-height: 290px;
- }
-
- #edit-bynder-search .item-list .facet_list .facet_title > .item-list ul {
- padding: 0.5em;
- vertical-align:top;
- margin: 0.1em;
- }
-
- #edit-bynder-search ul ul {
- overflow-y: auto;
- }
-
- #edit-bynder-search .item-list .facet_list .facet_title ul li {
- position: relative;
- height: 30px;
- margin-bottom: 5px;
- padding: 0;
- line-height: 30px;
- border: 1px solid #ddd;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- background-color: transparent;
- list-style: none;
- }
-
- #edit-bynder-search .item-list .facet_list .facet_title ul li:hover {
- border-color: #ccc;
- background-color: #f9f9f9;
-
- cursor: pointer;
- }
-
- #edit-bynder-search .item-list .facet_list .facet_title ul li a {
- padding-right: 45px;
- padding-left: 10px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
-
- #edit-bynder-search .item-list .facet_list .facet_title ul li a.active {
- color: #fff;
-
- background-color: #148fc8;
- }
-
- #edit-bynder-search .item-list .facet_list .facet_title ul li .count {
- position: absolute;
- top: 0;
- right: 10px;
-
- color: #ccc;
- }
-
- #edit-bynder-search .item-list .facet_list .facet_title ul li a:hover {
- text-decoration: underline;
- }
-
- #edit-bynder-search .item-list .facet_list > .facet_title {
- display: inline-block;
- margin: 0 1em 0 0;
-
-
- list-style-type: none;
- cursor: pointer;
- }
-
- #edit-bynder-search .item-list .facet_list .facet_title > .item-list {
- position: absolute;
- z-index: 10;
-
- display: none;
- overflow: hidden;
-
- background-color: #fff;
- border-radius: 0 0 3px 3px;
- border: solid thin #ddd;
- }
-
- #edit-bynder-search .item-list .facet_list .facet_title > span {
- margin-bottom: 10px;
- font-weight: bold;
- }
-
- #edit-bynder-search .item-list .facet_list .facet_title > span .expand {
- float: right;
- font-size: 20px;
- padding: 0 0.5em;
- }
-
- #edit-bynder-search .item-list .selected_facet_list .facet_title > span {
- padding: 0.5em;
- border: solid thin #ddd;
- background:#eee;
- }
-
- #edit-bynder-search .item-list .selected_facet_list .facet_title > span .expand {
- padding:0;
- margin-left:0.5em;
- }
-
- #edit-bynder-search input.form-submit {
- margin: 0.25em 1em;
- display: inline-block;
- padding: 0.5em 1em;
-
- color: #fff;
-
- border: 1px solid #148fc8;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- background: #1ca0de;
- -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
- -moz-box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
- box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
- }
-
- #edit-bynder-search input.form-submit:hover {
- background-color: #148fc8;
- }
-
- #edit-bynder-search input.form-submit:active {
- color: #fff;
- text-shadow: 0 0 0 transparent;
- }
-
- #edit-bynder-search input.form-submit:focus,
- #edit-bynder-search input.form-submit:focus:hover {
- color: rgba(255,255,255,0.5);
-
- outline: none;
- background-color: #148fc8;
- }
-
-
- .alert {
- position: absolute;
- top: 25px;
- right: 20px;
-
- padding: 15px;
-
- border: 1px solid transparent;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- }
-
- .alert-warning {
- font-size: 14px;
- color: #8a6d3b;
-
- border-color: #faebcc;
- background-color: #fcf8e3;
- }
-
- .alert-error {
- color: #a94442;
-
- border-color: #ebccd1;
- background-color: #f2dede;
- }
-
- .alert-success {
- color: #3c763d;
-
- border-color: #d6e9c6;
- background-color: #dff0d8;
- }
-
-
- body.page-media-browser {
- overflow-y: scroll;
- }
-
- .media-modal-frame {
- height: 800px!important;
- }
-
- #edit-search {
- border: none;
- padding: 0;
- }
-
- span#clear-all {
- background-color: #1ca0de!important;
- }
-
- /* set default standard media queries for responsive grid. */
- @media only screen and (min-width: 320px) {
- .grid-sizer,
- .grid-item {
- width: 96%;
- }
- .gutter-sizer {
- width: 20px;
- }
- }
-
- @media only screen and (min-width: 768px) {
- .grid-sizer,
- .grid-item {
- width: 46%;
- }
- .gutter-sizer {
- width: 20px;
- }
- }
-
- @media only screen and (min-width: 992px) {
- .grid-sizer,
- .grid-item {
- width: 23%;
- }
- .gutter-sizer {
- width: 10px;
- }
- }
-
- /* Jump back down for XL screens to better utilize the space. */
- @media only screen and (min-width: 1600px) {
- .grid-sizer,
- .grid-item {
- width: 15%;
- }
- .gutter-sizer {
- width: 10px;
- }
- }
-
- #thumbnails {
- margin-top: 2em;
- }
-
- .grid-item {
- border: 2px solid lightgray;
- box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.13);
- float: left;
- position: relative;
- transition: .2s;
- }
-
- .grid-item .form-type-checkbox {
- display: none;
- }
-
- .grid-item img {
- display: block;
- width: 100%;
- }
-
- .grid-item .more-info {
- background: #000000;
- background: rgba(0, 0, 0, 0.85);
- bottom: 0;
- color: whitesmoke;
- left: 0;
- overflow: hidden;
- position: absolute;
- transition: .2s;
- width: 100%;
- }
-
- .grid-item:hover .more-info {
- opacity: .15;
- }
-
- .grid-item .more-info .name {
- margin: 0.5em 0.5em 0 0.5em;
- }
-
- .grid-item .more-info .type {
- margin: 0 0.5em 0.5em 0.5em;
- }
-
- .grid-item.checked:after {
- background-size: 54px 54px;
- }
-
- .grid-item.item-style {
- opacity: 1;
- transition: opacity .25s ease-in-out;
- -moz-transition: opacity .25s ease-in-out;
- -webkit-transition: opacity .25s ease-in-out;
- }
-
- .grid-item:hover {
- border: 2px solid darkgrey;
- }
-
- .grid-item.checked {
- border: 2px solid darkgrey;
- }
-
- .grid-item.checked:after {
- background: url("../images/checkmark.svg") no-repeat center center;
- content: " ";
- height: 100%;
- left: 0;
- position: absolute;
- top: 0;
- width: 100%;
- }
-
- .overlay-throbber {
- background: #000000;
- background: rgba(216, 216, 216, 0.85);
- bottom: 0;
- height: 100%;
- left: 0;
- position: fixed;
- right: 0;
- top: 0;
- width: 100%;
- z-index: 1000;
- }
-
- .bynder-filters .form-item {
- display: inline-block;
- vertical-align: top;
- }
-
- #edit-search-button {
- clear: both;
- display: block;
- margin-left: 0;
- }
-
- .oauth-reload {
- display: none;
- }