/* A content browser modal window to add, edit, delete, select and search CMS resources. Each resource type like Image or BlogPost has its own item representation and custom edit view. All styles are bootstrap independent. You are free to customize the content browser to your likings. */ @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-moz-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-ms-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-o-keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } } @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } @-webkit-keyframes editing-rotation { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); } } @-moz-keyframes editing-rotation { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(359deg); } } @-o-keyframes editing-rotation { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(359deg); } } @keyframes editing-rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .scrivito-content-browser * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .editing-overlay { background: rgba(0, 0, 0, 0.8); opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.5s linear; transition: opacity 0.5s linear; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); position: fixed; z-index: 222222; } .editing-overlay.show { opacity: 0.85; filter: alpha(opacity=85); -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); bottom: 0; left: 0; right: 0; top: 0; z-index: 222222; } .pull-right { float: right !important; } .pull-left { float: left !important; } .img-responsive { display: block; height: auto; max-width: 100%; } .scrivito_button { display: inline-block; color: #555; font-size: 14px; font-weight: normal; line-height: 14px; text-align: center; padding: 8px 10px; margin: 0 10px 10px 0; position: relative; z-index: 1; vertical-align: middle; min-width: 90px; min-height: 14px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #fcfcfc; border-radius: 5px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .scrivito_button:focus, .scrivito_button:hover { cursor: pointer; color: #333; background: white; } .scrivito_button:active { cursor: pointer; color: #333; background: #efefef; } .scrivito_button.scrivito_left { float: left; margin: 0 0 0 10px; } .scrivito_button.scrivito_right { float: right; margin: 0 10px 0 0; } input.scrivito_button { height: 30px; } a.scrivito_button, a.scrivito_button:hover, a.scrivito_button:focus, a.scrivito_button:active { text-decoration: none; } .scrivito_button.scrivito_blue { background: #516b8b; color: #fff; } .scrivito_button.scrivito_blue:hover { background: #6884a7; color: #fff; } .scrivito_button.scrivito_blue:active { background: #485f7b; color: #fff; } .scrivito_button.scrivito_green { background: #658b51; color: #fff; } .scrivito_button.scrivito_green:hover { background: #7ea768; color: #fff; } .scrivito_button.scrivito_green:active { background: #597b48; color: #fff; } .scrivito_button.scrivito_red { background: #aa4040; color: #fff; } .scrivito_button.scrivito_red:hover { background: #c15c5c; color: #fff; } .scrivito_button.scrivito_red:active { background: #973939; color: #fff; } .scrivito_button.scrivito_yellow { background: #d8d63a; color: #666; } .scrivito_button.scrivito_yellow:hover { background: #e0df65; color: #666; } .scrivito_button.scrivito_yellow:active { background: #cfcd29; color: #666; } .scrivito_button.scrivito_darkgrey { background: #555; color: #fff; } .scrivito_button.scrivito_darkgrey:hover { background: #6e6e6e; color: #fff; } .scrivito_button.scrivito_darkgrey:active { background: #484848; color: #fff; } .scrivito_button.scrivito_lightgrey { background: #888; color: #fff; } .scrivito_button.scrivito_lightgrey:hover { background: #a2a2a2; color: #fff; } .scrivito_button.scrivito_lightgrey:active { background: #7b7b7b; color: #fff; } .scrivito_button.scrivito_disabled, .scrivito_button.scrivito_disabled:hover, .scrivito_button.scrivito_disabled:active { color: #aaaaaa !important; cursor: not-allowed; background: #eee; } .scrivito_button.scrivito_disabled .scrivito_icon { color: #aaaaaa !important; } .scrivito_button .scrivito_icon { padding: 0 7px 0 0; font-size: 9px; line-height: 0px; color: #333; } .scrivito_button .scrivito_icon:hover { cursor: pointer; } .scrivito_button.scrivito_lightgrey .scrivito_icon, .scrivito_button.scrivito_darkgrey .scrivito_icon, .scrivito_button.scrivito_blue .scrivito_icon, .scrivito_button.scrivito_green .scrivito_icon, .scrivito_button.scrivito_red .scrivito_icon, .scrivito_button.scrivito_yellow .scrivito_icon { color: #fff; } .scrivito_button .scrivito-content-browser-icon:first-child { padding-right: 5px; } .scrivito_button .scrivito-content-browser-icon:last-child { padding-left: 5px; } .scrivito_menu_box { position: absolute; top: 30px; left: 0; display: none; list-style-type: none; margin: 0; padding: 0; background: #555; background: rgba(34, 34, 34, 0.9); color: #eee; border: 3px solid #222; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; border-radius: 5px; min-width: 140px; -webkit-box-shadow: 0 0 3px rgba(34, 34, 34, 0.9); box-shadow: 0 0 3px rgba(34, 34, 34, 0.9); } .scrivito_menu_box:after, .scrivito_menu_box:before { bottom: 100%; border: solid #222; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .scrivito_menu_box:after { border-color: rgba(0, 0, 0, 0); border-bottom-color: rgba(34, 34, 34, 0.9); border-width: 7px; left: 5px; margin-right: -7px; } .scrivito_menu_box:before { border-color: rgba(33, 33, 33, 0); border-bottom-color: #222; border-width: 11px; left: 1px; margin-right: -11px; } .scrivito_menu_box.scrivito_right { left: auto; right: 0; } .scrivito_menu_box.scrivito_right:after { left: auto; right: 5px; margin-right: 0px; margin-left: -7px; } .scrivito_menu_box.scrivito_right:before { left: auto; right: 1px; margin-right: 0px; margin-left: -11px; } .scrivito_menu_box.scrivito_bottom_left { left: 0; right: auto; top: auto; bottom: 30px; } .scrivito_menu_box.scrivito_bottom_left:after { left: 5px; right: auto; margin-left: 0px; margin-right: -7px; bottom: auto; top: 100%; border-top-color: rgba(34, 34, 34, 0.9); border-bottom-color: transparent; } .scrivito_menu_box.scrivito_bottom_left:before { left: 1px; right: auto; margin-left: 0px; margin-right: -11px; bottom: auto; top: 100%; border-top-color: #222; border-bottom-color: transparent; } .scrivito_menu_box.scrivito_bottom_right { left: auto; right: 0; top: auto; bottom: 30px; } .scrivito_menu_box.scrivito_bottom_right:after { left: auto; right: 5px; margin-right: 0px; margin-left: -7px; bottom: auto; top: 100%; border-top-color: rgba(34, 34, 34, 0.9); border-bottom-color: transparent; } .scrivito_menu_box.scrivito_bottom_right:before { left: auto; right: 1px; margin-right: 0px; margin-left: -11px; bottom: auto; top: 100%; border-top-color: #222; border-bottom-color: transparent; } .scrivito_button_bar .scrivito_menu_box { top: 49px; left: 5px; } .scrivito_button_bar .scrivito_menu_box.scrivito_right { top: 49px; left: auto; right: 5px; } .scrivito_menu_box .scrivito_menu_item { clear: left; display: block; position: relative; margin: 0; padding: 0; line-height: 25px; width: 100%; border-top: 1px solid #222; } .scrivito_menu_separator { min-height: 4px; background: rgba(0, 0, 0, 0.4); } .scrivito_menu_separator span { display: block; font-size: 10px; padding: 3px 4px 2px; color: #aaa; text-shadow: 0 1px 1px #000; font-weight: bold; text-align: left; } .scrivito_menu_box .scrivito_menu_item:first-child { border-top: none; } .scrivito_menu_box .scrivito_menu_item:first-child span, .scrivito_menu_box .scrivito_menu_item:first-child a { border-radius: 4px 4px 0 0; } .scrivito_menu_box .scrivito_menu_item:last-child span, .scrivito_menu_box .scrivito_menu_item:last-child a { border-radius: 0 0 4px 4px; } .scrivito_menu_box .scrivito_menu_item:only-child span, .scrivito_menu_box .scrivito_menu_item:only-child a { border-radius: 4px; } .scrivito_menu_box .scrivito_menu_item span, .scrivito_menu_box .scrivito_menu_item a { display: block; line-height: 23px; font-size: 12px; font-weight: bold; padding: 3px 6px 2px 6px; margin: 0; white-space: nowrap; text-align: left; text-decoration: none; color: #eee; text-shadow: 0 1px 1px #111; border-radius: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .scrivito_menu_box .scrivito_menu_item span:hover, .scrivito_menu_box .scrivito_menu_item a:hover, .scrivito_menu_box .scrivito_menu_item span:active, .scrivito_menu_box .scrivito_menu_item a:active, .scrivito_menu_box .scrivito_menu_item.active a, .scrivito_menu_box .scrivito_menu_item.active span { color: #fff; cursor: pointer; background: #34732d; } .scrivito_menu_box .scrivito_menu_item span .scrivito-content-browser-icon, .scrivito_menu_box .scrivito_menu_item a .scrivito-content-browser-icon { font-size: 16px; padding: 0 7px 2px 0; line-height: 15px; color: #eee; } .scrivito_menu_box .scrivito_menu_item.scrivito_disabled span:hover, .scrivito_menu_box .scrivito_menu_item.scrivito_disabled a:hover { cursor: help; color: dimgrey !important; background: #274324; } .scrivito_menu_box .scrivito_menu_item.scrivito_disabled span, .scrivito_menu_box .scrivito_menu_item.scrivito_disabled a, .scrivito_menu_box .scrivito_menu_item.scrivito_disabled span .scrivito-content-browser-icon, .scrivito_menu_box .scrivito_menu_item.scrivito_disabled a .scrivito-content-browser-icon { color: dimgrey !important; cursor: help; } .scrivito_menu_box .scrivito_menu_item.scrivito_highlight { background: rgba(192, 175, 62, 0.4); } .scrivito-content-browser { border-radius: 5px; -webkit-box-shadow: 0 5px 30px black; box-shadow: 0 5px 30px black; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity 0.5s linear; transition: opacity 0.5s linear; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); font-family: Arial, sans-serif; height: 90%; left: 50%; margin: -250px 0 0 -40%; overflow: hidden; position: fixed; top: 50%; visibility: hidden; width: 90%; z-index: 3333333; } .scrivito-content-browser.show { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); top: 50%; visibility: visible; z-index: 3333333; } .scrivito-content-browser .scrivito-content-browser-footer .editing-button { float: right; margin: 0 10px 0 0; } .scrivito-content-browser .scrivito-content-browser-body { clear: both; height: 100%; margin: 0; padding: 0 0 50px 0; position: relative; } .scrivito-content-browser .scrivito-app-root { height: 100%; } .scrivito-content-browser .scrivito-content-browser-wrapper { float: left; height: 100%; padding-top: 50px; position: relative; width: 70%; } .scrivito-content-browser .scrivito-content-browser-topbar { background: #666; color: #fff; -webkit-box-shadow: -3px 0 5px -3px #333333 inset; box-shadow: -3px 0 5px -3px #333333 inset; height: 50px; left: 0; padding: 11px 10px 9px 10px; position: absolute; top: 0; width: 100%; } .scrivito-content-browser .scrivito-content-browser-search { float: left; overflow: hidden; position: relative; width: 65%; white-space: nowrap; } .scrivito-content-browser .scrivito-content-browser-search .search-field { border: 0px; color: #333; border-radius: 15px 0 0 15px; -webkit-box-shadow: 0 0 3px #cccccc inset, 0 0 8px rgba(109, 131, 166, 0); box-shadow: 0 0 3px #cccccc inset, 0 0 8px rgba(109, 131, 166, 0); -webkit-transition: border linear .5s, box-shadow linear .5s; -moz-transition: border linear .5s, box-shadow linear .5s; -o-transition: border linear .5s, box-shadow linear .5s; transition: border linear .5s, box-shadow linear .5s; display: block; float: left; font-size: 14px; height: 30px; line-height: 30px; margin: 0; padding: 4px 14px; width: 300px; } .scrivito-content-browser .scrivito-content-browser-search .search-field:focus { -webkit-box-shadow: 0 0 1px #aaaaaa inset, 0 0 8px rgba(109, 131, 166, 0.6); box-shadow: 0 0 1px #aaaaaa inset, 0 0 8px rgba(109, 131, 166, 0.6); -webkit-transition: box-shadow 0.5s linear; transition: box-shadow 0.5s linear; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); outline: 0; } .scrivito-content-browser .scrivito-content-browser-search .search-field-button { background: #7EA46A; border-radius: 0 15px 15px 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; border: 0px; border-left: none; color: #fff; cursor: pointer; display: inline; font-size: 14px; font-weight: normal; height: 30px; margin: 0; padding: 0; text-align: center; width: 80px; } .scrivito-content-browser .scrivito-content-browser-search .search-field-button:hover { background: #94BA80; color: #fff; cursor: pointer; } .scrivito-content-browser .scrivito-content-browser-search .search-field-button:active { background: #7EA46A; color: #fff; cursor: pointer; } .scrivito-content-browser .scrivito-content-browser-topbar .editing-button-view { display: block; float: right; height: 32px; line-height: 32px; padding: 0 7px; } .scrivito-content-browser .scrivito-content-browser-topbar .editing-button-view:hover { cursor: pointer; } .scrivito-content-browser .scrivito-content-browser-topbar .editing-button-view .scrivito-content-browser-icon { -webkit-transition: all 0.3s linear; transition: all 0.3s linear; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); color: #fff; font-size: 18px; line-height: 32px; text-shadow: 0 0 2px #333; } .scrivito-content-browser .scrivito-content-browser-topbar .editing-button-view:hover .scrivito-content-browser-icon, .scrivito-content-browser .scrivito-content-browser-topbar .editing-button-view.active .scrivito-content-browser-icon { -webkit-transition: all 0.3s linear; transition: all 0.3s linear; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); color: #7EA46A; } .scrivito-content-browser .scrivito-content-browser-filter, .scrivito-content-browser .scrivito-content-browser-items, .scrivito-content-browser .scrivito-content-browser-inspector { background: #eee; float: left; height: 100%; overflow: auto; position: relative; -webkit-overflow-scrolling: touch; } .scrivito-content-browser .scrivito-content-browser-filter { background-color: #fafafa; -webkit-box-shadow: 0 -3px 4px -3px #bbbbbb inset, 0 3px 4px -3px #bbbbbb inset; box-shadow: 0 -3px 4px -3px #bbbbbb inset, 0 3px 4px -3px #bbbbbb inset; padding: 40px 0 0 0; width: 25%; } .scrivito-content-browser-filter-fixed { height: 40px; width: 100%; position: absolute; top: 0; border-bottom: 3px solid #aaa; overflow: hidden; } .scrivito-content-browser-filter-scroll { height: 100%; overflow: auto; } .scrivito-content-browser .scrivito-content-browser-items { background: #ccc; -webkit-box-shadow: 0 0 4px #666666 inset; box-shadow: 0 0 4px #666666 inset; padding: 0; width: 75%; } .scrivito-content-browser .scrivito-content-browser-inspector { -webkit-box-shadow: 0 -3px 4px -3px #bbbbbb inset; box-shadow: 0 -3px 4px -3px #bbbbbb inset; padding: 0 15px; width: 30%; } .scrivito-content-browser .scrivito-content-browser-footer { background: #eee; bottom: 0; left: 0; height: 50px; margin: 0; padding: 10px 0; position: absolute; text-align: right; width: 100%; } .scrivito-content-browser .scrivito-content-browser-footer:before, .scrivito-content-browser .scrivito-content-browser-footer:after { content: " "; display: table; } .scrivito-content-browser .scrivito-content-browser-footer:after { clear: both; } /* .scrivito-content-browser ul.scrivito-content-browser-filter-items { display: block; list-style-type: none; margin: 0; padding: 0; } .scrivito-content-browser ul.scrivito-content-browser-filter-items li { border-bottom: 1px solid #eee; border-top: 1px solid #fff; display: block; margin: 0; padding: 8px 5px 8px 8px; } .scrivito-content-browser ul.scrivito-content-browser-filter-items li:before, .scrivito-content-browser ul.scrivito-content-browser-filter-items li:after { display: table; content: ""; line-height: 0; } .scrivito-content-browser ul.scrivito-content-browser-filter-items li:after { clear: both; } .scrivito-content-browser ul.scrivito-content-browser-filter-items li:first-child { border-top: 1px solid transparent; } .scrivito-content-browser ul.scrivito-content-browser-filter-items li:hover, .scrivito-content-browser ul.scrivito-content-browser-filter-items li.active { background: #7EA46A; border-bottom: 1px solid #658B51; border-top: 1px solid #658B51; cursor: pointer; position: relative; } .scrivito-content-browser ul.scrivito-content-browser-filter-items li:hover .scrivito-content-browser-icon, .scrivito-content-browser ul.scrivito-content-browser-filter-items li.active .scrivito-content-browser-icon, .scrivito-content-browser ul.scrivito-content-browser-filter-items li:hover .scrivito-content-browser-filter-name, .scrivito-content-browser ul.scrivito-content-browser-filter-items li.active .scrivito-content-browser-filter-name { color: #fff; text-shadow: 0 1px 1px #888; } .scrivito-content-browser ul.scrivito-content-browser-filter-items li.separator { background-color: #f8f8f8; @include box-shadow(0 0 1px #aaa); border: none; height: 4px; padding: 0; position: relative; } .scrivito-content-browser ul.scrivito-content-browser-filter-items li.selected-items { @include box-shadow(0 0 3px #ccc inset); background: #eee; } .scrivito-content-browser ul.scrivito-content-browser-filter-items li.selected-items:hover, .scrivito-content-browser ul.scrivito-content-browser-filter-items li.selected-items.active { @include box-shadow(0 0 3px #333 inset); background: #5A8BD1; } .scrivito-content-browser .scrivito-content-browser-counter { border-radius: 15px; background: #444; color: #fff; display: inline-block; font-size: 10px; font-weight: bold; line-height: 11px; margin: 1px -5px 0 7px; padding: 1px 6px; } .scrivito-content-browser ul.scrivito-content-browser-filter-items .scrivito-content-browser-icon { color: #666; display: inline; font-size: 22px; line-height: 20px; padding: 0 7px 0 0; text-shadow: 0 1px 1px #fff; } .scrivito-content-browser ul.scrivito-content-browser-filter-items .scrivito-content-browser-filter-name { color: #666; display: inline; font-size: 11px; font-weight: bold; line-height: 20px; word-wrap: break-word; } .scrivito-content-browser ul.scrivito-content-browser-filter-items li:hover .scrivito-content-browser-counter, .scrivito-content-browser ul.scrivito-content-browser-filter-items li.active .scrivito-content-browser-counter { background: #fff; color: #5a8bd1; text-shadow: 0 0 0 #fff; } */ .scrivito-content-browser-counter { border-radius: 15px; background: #444; color: #fff; display: inline-block; font-size: 10px; font-weight: bold; line-height: 11px; margin: 1px -5px 0 7px; padding: 1px 6px; } .scrivito-content-browser-filter-item { padding: 8px; color: #444; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .scrivito-content-browser-filter-item .scrivito-content-browser-icon { display: inline-block; font-size: 22px; line-height: 20px; padding: 0 7px 0 0; } .scrivito-content-browser-filter-item:hover, .scrivito-content-browser-filter-item.active { background: #7EA46A; color: #fff; cursor: pointer; position: relative; } .scrivito-content-browser-filter-item .scrivito-content-browser-filter-label { display: inline-block; font-size: 11px; font-weight: bold; line-height: 20px; word-wrap: break-word; } .scrivito-content-browser-filter-item:hover .scrivito-content-browser-counter, .scrivito-content-browser-filter-item.active .scrivito-content-browser-counter { background: #fff; color: #7EA46A; } .scrivito-content-browser-filter .scrivito_button { display: block; float: none; font-size: 11px; font-weight: bold; margin: 5px; padding: 2px; } .scrivito-content-browser-hierarchy-filter { display: block; list-style-type: none; margin: 0; padding: 0; color: #444; } .scrivito-content-browser-hierarchy-filter.disabled { opacity: 0.5; filter: alpha(opacity=50); } .scrivito-content-browser-hierarchy-filter li { display: block; margin: 0; padding: 0; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .scrivito-content-browser-hierarchy-filter li .scrivito-content-browser-hierarchy-arrow, .scrivito-content-browser-hierarchy-filter li .scrivito-content-browser-hierarchy-checkbox, .scrivito-content-browser-hierarchy-filter li .scrivito-content-browser-hierarchy-radio { font-size: 11px; padding: 0 5px 0 10px; line-height: 30px; position: absolute; top: 0; left: 0; font-family: 'scrivito_iconsregular'; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: middle; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .scrivito-content-browser-hierarchy-filter li .scrivito-content-browser-hierarchy-checkbox, .scrivito-content-browser-hierarchy-filter li .scrivito-content-browser-hierarchy-radio { font-size: 15px; line-height: 23px; } .scrivito-content-browser-hierarchy-filter li .scrivito-content-browser-hierarchy-arrow { display: none; } .scrivito-content-browser-hierarchy-filter li.open > .scrivito-content-browser-hierarchy-arrow, .scrivito-content-browser-hierarchy-filter li.closed > .scrivito-content-browser-hierarchy-arrow { display: block; } .scrivito-content-browser-hierarchy-filter li.open .scrivito-content-browser-hierarchy-arrow:after { content: "\F025"; } .scrivito-content-browser-hierarchy-filter li.closed .scrivito-content-browser-hierarchy-arrow:after { content: "\F027"; } .scrivito-content-browser-hierarchy-filter li .scrivito-content-browser-hierarchy-checkbox:after { content: "\F123"; } .scrivito-content-browser-hierarchy-filter li.active .scrivito-content-browser-hierarchy-checkbox:after { content: "\F124"; } .scrivito-content-browser-hierarchy-filter li .scrivito-content-browser-hierarchy-radio:after { content: "\F136"; } .scrivito-content-browser-hierarchy-filter li.active .scrivito-content-browser-hierarchy-radio:after { content: "\F137"; } .scrivito-content-browser-hierarchy-filter li .scrivito-content-browser-hierarchy-arrow:hover, .scrivito-content-browser-hierarchy-filter li .scrivito-content-browser-hierarchy-checkbox:hover, .scrivito-content-browser-hierarchy-filter li .scrivito-content-browser-hierarchy-radio:hover { cursor: pointer; } .scrivito-content-browser-hierarchy-filter li .scrivito-content-browser-icon { font-size: 14px; line-height: 30px; padding-right: 3px; } .scrivito-content-browser-hierarchy-filter li .scrivito-content-browser-hierarchy-label { padding: 0 5px 0 30px; line-height: 30px; } /* compact */ .scrivito-content-browser-hierarchy-filter.compact li .scrivito-content-browser-hierarchy-arrow { line-height: 23px; } .scrivito-content-browser-hierarchy-filter.compact li .scrivito-content-browser-icon { font-size: 14px; line-height: 23px; } .scrivito-content-browser-hierarchy-filter.compact li .scrivito-content-browser-hierarchy-label { padding: 0 5px 0 30px; line-height: 23px; } .scrivito-content-browser-hierarchy-filter.compact > li > .scrivito-content-browser-hierarchy-label { border-bottom: 2px solid #eee; } .scrivito-content-browser-hierarchy-filter li .scrivito-content-browser-hierarchy-label:hover { background: rgba(155, 182, 141, 0.4); cursor: pointer; } .scrivito-content-browser-hierarchy-filter li.active > .scrivito-content-browser-hierarchy-label { background: #7EA46A; color: #fff; cursor: pointer; } .scrivito-content-browser-hierarchy-filter li.active > .scrivito-content-browser-hierarchy-arrow, .scrivito-content-browser-hierarchy-filter li.active > .scrivito-content-browser-hierarchy-checkbox, .scrivito-content-browser-hierarchy-filter li.active > .scrivito-content-browser-hierarchy-radio { color: #fff; } .scrivito-content-browser-hierarchy-filter span { vertical-align: middle; display: inline-block; font-size: 11px; font-weight: bold; line-height: 20px; word-wrap: break-word; } .scrivito-content-browser-hierarchy-filter li.closed ul { display: none; } .scrivito-content-browser-hierarchy-filter ul { margin: 0; padding: 0; } .scrivito-content-browser-hierarchy-filter ul li .scrivito-content-browser-hierarchy-arrow { left: 5px; } .scrivito-content-browser-hierarchy-filter ul li .scrivito-content-browser-hierarchy-label { background: #eee; } .scrivito-content-browser-hierarchy-filter li.closed ul { display: none; } .scrivito-content-browser-hierarchy-filter ul li li .scrivito-content-browser-hierarchy-label { padding: 0 5px 0 40px; background: #e5e5e5; } .scrivito-content-browser-hierarchy-filter ul li li .scrivito-content-browser-hierarchy-arrow { left: 10px; } .scrivito-content-browser-hierarchy-filter ul li li li .scrivito-content-browser-hierarchy-label { padding: 0 5px 0 45px; background: #dadada; } .scrivito-content-browser-hierarchy-filter ul li li li .scrivito-content-browser-hierarchy-arrow { left: 15px; } .scrivito-content-browser-hierarchy-filter ul li li li li .scrivito-content-browser-hierarchy-label { padding: 0 5px 0 50px; background: #cfcfcf; } .scrivito-content-browser-hierarchy-filter ul li li li li .scrivito-content-browser-hierarchy-arrow { left: 20px; } .scrivito-content-browser-filter .scrivito_separator { padding: 3px 8px; margin: 5px 0; background: rgba(0, 0, 0, 0.1); color: #777; text-transform: uppercase; font-size: 11px; font-weight: bold; line-height: 14px; } .scrivito-content-browser .scrivito-content-browser-items.uploader-drag-over { background: #658b51; -webkit-box-shadow: 0 0 4px #333333 inset; box-shadow: 0 0 4px #333333 inset; } .scrivito-content-browser .scrivito-content-browser-items.uploader-drag-over:before { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; color: #fff; content: '\F022'; display: block; text-align: center; font-family: 'scrivito_iconsregular'; font-size: 83px; font-style: normal; font-weight: normal; position: absolute; top: 50%; vertical-align: middle; width: 83%; } .scrivito-content-browser .scrivito-content-browser-items.uploader-drag-over ul.scrivito-content-browser-thumbnails { opacity: 0.3; filter: alpha(opacity=30); } .scrivito-content-browser ul.scrivito-content-browser-thumbnails { display: block; list-style-type: none; margin: 0; overflow: hidden; padding: 15px 0 0 15px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails li { border-radius: 4px; -webkit-box-shadow: 0 0 4px #888888; box-shadow: 0 0 4px #888888; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); background: #fff; display: block; float: left; height: 200px; line-height: normal; margin: 0 15px 15px 0; overflow: hidden; padding: 0; width: 200px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails li:hover { -webkit-box-shadow: 0 0 7px 0px #555555; box-shadow: 0 0 7px 0px #555555; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); cursor: pointer; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails li.active { -webkit-box-shadow: 0 0 0 3px #658b51, 0 0 4px 6px rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 3px #658b51, 0 0 4px 6px rgba(255, 255, 255, 0.3); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-item-wrapper { position: relative; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-preview { background: #e3e3e3; height: 160px; overflow: hidden; position: relative; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-preview img { display: block; max-height: 100%; max-width: 100%; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-preview .scrivito-content-browser-icon { color: #fff; display: block; float: none; font-size: 100px; line-height: 160px; text-align: center; text-shadow: 0 0 5px rgba(0, 0, 0, 0.05); } .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-meta { background: #fff; height: 40px; padding: 5px 42px 5px 5px; position: relative; z-index: 2; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-thumbnails-name { color: #555; display: block; font-size: 11px; font-weight: bold; line-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-thumbnails-size { color: #aaa; display: block; font-size: 10px; font-weight: bold; line-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-inspect:before { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.6s ease; transition: all 0.6s ease; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); background: rgba(126, 164, 106, 0.7); top: 0; color: #fff; content: '\F063'; display: block; font-family: 'scrivito_iconsregular'; font-style: normal; font-weight: normal; line-height: 170px; min-height: 200px; margin: 0; padding: 0; position: absolute; right: 0; text-align: center; text-decoration: none; vertical-align: middle; width: 100%; font-size: 65px; z-index: 1; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-preview:hover .scrivito-content-browser-inspect:before { opacity: 1; filter: alpha(opacity=100); -webkit-transition: all 0.6s ease; transition: all 0.6s ease; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-thumbnails-select:before { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; background: #fff; bottom: 0; color: #ddd; content: '\F123'; display: block; font-family: 'scrivito_iconsregular'; font-style: normal; font-weight: normal; height: 40px; line-height: 42px; margin: 0; padding: 0; position: absolute; right: 0; text-align: center; text-decoration: none; vertical-align: middle; width: 40px; font-size: 22px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails li .scrivito-content-browser-thumbnails-select.active:before { background: #7EA46A; color: #fff; content: '\F124'; } /* normal-list */ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list { padding-right: 15px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list li { height: 35px; width: 100%; margin: 0 0 10px 0; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list li .scrivito-content-browser-preview { display: none; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list li .scrivito-content-browser-meta { top: 0; left: 0; right: 0; bottom: 0; padding: 0px 25px 0px 45px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list li .scrivito-content-browser-thumbnails-name { font-size: 12px; font-weight: normal; line-height: 35px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list li .scrivito-content-browser-thumbnails-size { font-size: 9px; line-height: 13px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list li .scrivito-content-browser-thumbnails-select:before { font-size: 9px; height: 35px; line-height: 37px; width: 40px; position: absolute; top: 0; left: 0; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list li .scrivito-content-browser-inspect:before { font-size: 9px; line-height: 37px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.normal-list .scrivito-content-browser-loading .scrivito-content-browser-icon { font-size: 25px; } /* small */ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.small li { height: 100px; width: 130px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.small li .scrivito-content-browser-preview { height: 70px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.small li .scrivito-content-browser-inspect:before { line-height: 70px; min-height: 100px; font-size: 40px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.small li .scrivito-content-browser-preview .scrivito-content-browser-icon { font-size: 40px; line-height: 70px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.small li .scrivito-content-browser-meta { height: 30px; padding: 2px 25px 0px 5px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.small li .scrivito-content-browser-thumbnails-name { font-size: 9px; line-height: 14px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.small li .scrivito-content-browser-thumbnails-size { font-size: 8px; line-height: 10px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.small li .scrivito-content-browser-thumbnails-select:before { font-size: 15px; height: 30px; line-height: 32px; width: 30px; } /* big */ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.big li { height: 300px; width: 300px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.big li .scrivito-content-browser-preview { height: 260px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.big li .scrivito-content-browser-inspect:before { line-height: 250px; min-height: 300px; font-size: 120px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.big li .scrivito-content-browser-preview .scrivito-content-browser-icon { font-size: 120px; line-height: 260px; } /* large */ .scrivito-content-browser ul.scrivito-content-browser-thumbnails.large li { height: 400px; width: 400px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.large li .scrivito-content-browser-preview { height: 360px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.large li .scrivito-content-browser-inspect:before { line-height: 370px; min-height: 400px; font-size: 150px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.large li .scrivito-content-browser-preview .scrivito-content-browser-icon { line-height: 360px; font-size: 140px; } /* scrivito-content-browser-list */ .scrivito-content-browser-list { padding: 30px 0 0 0; height: 100%; background: rgba(255, 255, 255, 0.4); } .scrivito-content-browser-list-head { height: 30px; overflow: hidden; position: absolute; top: 0; width: 100%; padding: 0 15px 0 0; background: rgba(0, 0, 0, 0.1); } .scrivito-content-browser-list-content { height: 100%; overflow-y: scroll; } .scrivito-content-browser-list table { margin: 0; padding-top: 30px; border: 0; max-width: 100%; width: 100%; border-collapse: collapse; border-spacing: 0; } .scrivito-content-browser-list table th, .scrivito-content-browser-list table td { padding: 2px 6px; font-size: 11px; min-width: 20px; font-weight: bold; line-height: 24px; vertical-align: middle; word-wrap: break-word; border: 0; } .scrivito-content-browser-list table th { color: #666666 !important; } .scrivito-content-browser-list table th:hover { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .scrivito-content-browser-list table th.sort_up:after { content: '\F026'; display: inline-block; font-family: 'scrivito_iconsregular'; font-style: normal; font-weight: normal; line-height: 24px; margin: 0; padding: 0 0 0 5px; text-decoration: none; vertical-align: middle; font-size: 13px; } .scrivito-content-browser-list table th.sort_down:after { content: '\F025'; display: inline-block; font-family: 'scrivito_iconsregular'; font-style: normal; font-weight: normal; line-height: 24px; margin: 0; padding: 0 0 0 5px; text-decoration: none; vertical-align: middle; font-size: 13px; } .scrivito-content-browser-list table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.3); } .scrivito-content-browser-list table th:nth-child(1), .scrivito-content-browser-list table td:nth-child(1) { width: 5%; padding: 0; } .scrivito-content-browser-list table th:nth-child(2), .scrivito-content-browser-list table td:nth-child(2) { width: 20%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 20px; color: #333; } .scrivito-content-browser-list table th:nth-child(3), .scrivito-content-browser-list table td:nth-child(3) { width: 20%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 20px; color: #777; } .scrivito-content-browser-list table th:nth-child(4), .scrivito-content-browser-list table td:nth-child(4) { width: 15%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 20px; color: #777; } .scrivito-content-browser-list table th:nth-child(5), .scrivito-content-browser-list table td:nth-child(5) { width: 15%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 20px; color: #777; } .scrivito-content-browser-list table th:nth-child(6), .scrivito-content-browser-list table td:nth-child(6) { width: 15%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 20px; color: #777; } .scrivito-content-browser-list-content tr:hover td, .scrivito-content-browser-list-content tr.active td { color: #fff; background: #9bb68d !important; } .scrivito-content-browser-list-content tr.active { outline: 2px solid #658B51; } .scrivito-content-browser-list-content .scrivito-content-browser-list-select:before { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; color: #666; content: '\F123'; display: block; font-family: 'scrivito_iconsregular'; font-style: normal; font-weight: normal; height: 28px; line-height: 28px; margin: 0; padding: 0; text-align: center; text-decoration: none; vertical-align: middle; width: 100%; font-size: 16px; z-index: 2; position: relative; } .scrivito-content-browser-list-content .scrivito-content-browser-list-select.active:before { background: #7EA46A; color: #fff; content: '\F124'; } .scrivito-content-browser-list-content .scrivito-content-browser-list-select:hover { cursor: pointer; } /* scrivito-content-browser-inspector */ .scrivito-content-browser .scrivito-content-browser-inspector { position: relative; } .scrivito-content-browser .scrivito-content-browser-inspector h3 { color: #666; font-size: 14px; line-height: 32px; margin-top: 10px; } .scrivito-content-browser .scrivito-content-browser-inspector h3 .scrivito-content-browser-icon { color: #666; font-size: 24px; line-height: 32px; padding: 0 5px 0; } .scrivito-content-browser .scrivito-content-browser-inspector .inspector-content { position: absolute; top: 46px; bottom: 2px; left: 10px; right: 10px; } .scrivito-content-browser .scrivito-content-browser-inspector .inspector-content iframe { height: 100%; border: 0; } .scrivito-content-browser .scrivito-content-browser-inspector code { word-wrap: break-word; } .no-editing-available { color: #d3d3d3; font-size: 15px; font-weight: bold; text-align: center; } .no-editing-available .scrivito-content-browser-icon { color: #e3e3e3; display: block; font-size: 85px; line-height: 200px; text-align: center; text-shadow: 0 1px 0 #ddd; } .scrivito-content-browser-loading { clear: both; height: 100%; overflow: hidden; position: relative; } .scrivito-content-browser-loading .scrivito-content-browser-icon { color: #666; display: block; font-size: 50px; line-height: 0; left: 0; margin: 0 auto; position: absolute; text-align: center; top: 50%; width: 100%; -webkit-animation: editing-rotation 5s infinite linear; -moz-animation: editing-rotation 5s infinite linear; -o-animation: editing-rotation 5s infinite linear; animation: editing-rotation 5s infinite linear; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails .scrivito-content-browser-loading .scrivito-content-browser-icon { color: #ddd; font-size: 50px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.small .scrivito-content-browser-loading .scrivito-content-browser-icon { font-size: 30px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.big .scrivito-content-browser-loading .scrivito-content-browser-icon { font-size: 80px; } .scrivito-content-browser ul.scrivito-content-browser-thumbnails.large .scrivito-content-browser-loading .scrivito-content-browser-icon { font-size: 100px; } .scrivito-content-browser-progress-wrapper { -webkit-box-shadow: 0 0 3px #bbbbbb; box-shadow: 0 0 3px #bbbbbb; background: rgba(255, 255, 255, 0.6); border-radius: 3px; left: 0; margin: 2% 10%; padding: 0; position: absolute; top: 0; width: 80%; } .scrivito-content-browser-progress-wrapper .scrivito-content-browser-progress-file { border-top: 1px solid #ccc; margin: 2px 0 0 0; padding: 5px; } .scrivito-content-browser-progress-wrapper .scrivito-content-browser-progress-file:first-child { border: none; margin: 0; } .scrivito-content-browser-progress-wrapper .scrivito-content-browser-progress-file p { color: #555; font-size: 13px; font-weight: bold; margin: 0 3px 6px 3px; overflow: hidden; text-overflow: ellipsis; } .scrivito-content-browser-progress-wrapper .scrivito-content-browser-progress-file .scrivito-content-browser-error:empty { display: none; } .scrivito-content-browser-progress-wrapper .scrivito-content-browser-progress-file .scrivito-content-browser-error { color: #aa4040; font-size: 13px; font-weight: normal; margin: 0 3px 6px 3px; } .scrivito-content-browser-progress-wrapper .scrivito-content-browser-progress { -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); background-color: #bbb; border-radius: 3px; height: 10px; margin: 0; overflow: hidden; } .scrivito-content-browser-progress-wrapper .scrivito-content-browser-progress .scrivito-content-browser-progress-bar { background-color: #658b51; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.7)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.7)), color-stop(0.75, rgba(255, 255, 255, 0.7)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.7) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.7) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.7) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.7) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.7) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.7) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.7) 75%, transparent 75%, transparent); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); -webkit-transition: width 0.6s ease; transition: width 0.6s ease; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); background-color: #658b51; background-size: 15px 15px; float: left; font-size: 12px; height: 100%; line-height: 10px; text-align: center; width: 0%; -webkit-animation: progress-bar-stripes 3s linear infinite; -moz-animation: progress-bar-stripes 3s linear infinite; -ms-animation: progress-bar-stripes 3s linear infinite; -o-animation: progress-bar-stripes 3s linear infinite; animation: progress-bar-stripes 3s linear infinite; } @media (min-width: 1150px) { .scrivito-content-browser .scrivito-content-browser-filter { width: 20%; } .scrivito-content-browser .scrivito-content-browser-items { width: 80%; } } @media (min-width: 769px) and (max-width: 979px) { .scrivito-content-browser { height: 90%; width: 90%; } } @media (max-width: 480px) { .scrivito-content-browser { height: 95%; width: 95%; } }