app/assets/stylesheets/scrivito_resourcebrowser/resourcebrowser.css in scrivito_resourcebrowser-0.0.5 vs app/assets/stylesheets/scrivito_resourcebrowser/resourcebrowser.css in scrivito_resourcebrowser-0.0.6

- old
+ new

@@ -28,11 +28,11 @@ right: 0; top: 0; z-index: 222222; } -.editing-resourcebrowser { +.scrivito-resourcebrowser { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 5px 30px #000000; -moz-box-shadow: 0 5px 30px #000000; @@ -54,11 +54,11 @@ visibility: hidden; width: 90%; z-index: 3333333; } -.editing-resourcebrowser.show { +.scrivito-resourcebrowser.show { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; @@ -66,16 +66,16 @@ top: 50%; visibility: visible; z-index: 3333333; } -.editing-resourcebrowser .editing-resourcebrowser-footer .editing-button { +.scrivito-resourcebrowser .scrivito-resourcebrowser-footer .editing-button { float: right; margin: 0 10px 0 0; } -.editing-resourcebrowser .editing-resourcebrowser-body { +.scrivito-resourcebrowser .scrivito-resourcebrowser-body { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background:#eee; clear: both; @@ -83,22 +83,22 @@ margin: 0; padding: 0 0 50px 0; position: relative; } -.editing-resourcebrowser .editing-resourcebrowser-wrapper { +.scrivito-resourcebrowser .scrivito-resourcebrowser-wrapper { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; height: 100%; padding-top: 50px; position: relative; width: 70%; } -.editing-resourcebrowser .editing-resourcebrowser-topbar { +.scrivito-resourcebrowser .scrivito-resourcebrowser-topbar { background: #666; color:#fff; -webkit-box-shadow: -3px 0 5px -3px #333 inset; -moz-box-shadow: -3px 0 5px -3px #333 inset; box-shadow: -3px 0 5px -3px #333 inset; @@ -111,19 +111,19 @@ position: absolute; top: 0; width: 100%; } -.editing-resourcebrowser .editing-resourcebrowser-search { +.scrivito-resourcebrowser .scrivito-resourcebrowser-search { float: left; overflow: hidden; position: relative; width: 65%; white-space: nowrap; } -.editing-resourcebrowser .editing-resourcebrowser-search .search-field { +.scrivito-resourcebrowser .scrivito-resourcebrowser-search .search-field { border:0px; color:#333; -webkit-border-radius: 15px 0 0 15px; -moz-border-radius: 15px 0 0 15px; border-radius: 15px 0 0 15px; @@ -145,22 +145,22 @@ margin: 0; padding: 4px 14px; width: 300px; } -.editing-resourcebrowser .editing-resourcebrowser-search .search-field:focus { +.scrivito-resourcebrowser .scrivito-resourcebrowser-search .search-field:focus { -webkit-box-shadow: 0 0 1px #aaa inset,0 0 8px rgba(109, 131, 166, .6); -moz-box-shadow: 0 0 1px #aaa inset,0 0 8px rgba(109, 131, 166, .6); box-shadow: 0 0 1px #aaa inset,0 0 8px rgba(109, 131, 166, .6); -webkit-transition: box-shadow linear .5s; -moz-transition: box-shadow linear .5s; -o-transition: box-shadow linear .5s; transition: box-shadow linear .5s; outline: 0; } -.editing-resourcebrowser .editing-resourcebrowser-search .search-field-button { +.scrivito-resourcebrowser .scrivito-resourcebrowser-search .search-field-button { background: #7EA46A; -webkit-border-radius: 0 15px 15px 0; -moz-border-radius: 0 15px 15px 0; border-radius: 0 15px 15px 0; -webkit-box-sizing: border-box; @@ -183,57 +183,57 @@ padding: 0; text-align: center; width: 80px; } -.editing-resourcebrowser .editing-resourcebrowser-search .search-field-button:hover { +.scrivito-resourcebrowser .scrivito-resourcebrowser-search .search-field-button:hover { background: #94BA80; color: #fff; cursor: pointer; } -.editing-resourcebrowser .editing-resourcebrowser-search .search-field-button:active { +.scrivito-resourcebrowser .scrivito-resourcebrowser-search .search-field-button:active { background: #7EA46A; color: #fff; cursor: pointer; } -.editing-resourcebrowser .editing-resourcebrowser-topbar .editing-button-view { +.scrivito-resourcebrowser .scrivito-resourcebrowser-topbar .editing-button-view { display: block; float: right; height: 32px; line-height: 32px; padding: 0 7px; } -.editing-resourcebrowser .editing-resourcebrowser-topbar .editing-button-view:hover { +.scrivito-resourcebrowser .scrivito-resourcebrowser-topbar .editing-button-view:hover { cursor: pointer; } -.editing-resourcebrowser .editing-resourcebrowser-topbar .editing-button-view .editing-icon { +.scrivito-resourcebrowser .scrivito-resourcebrowser-topbar .editing-button-view .scrivito-resourcebrowser-icon { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; color: #fff; - font-size: 9px; + font-size: 18px; line-height: 32px; text-shadow: 0 0 2px #333; } -.editing-resourcebrowser .editing-resourcebrowser-topbar .editing-button-view:hover .editing-icon, -.editing-resourcebrowser .editing-resourcebrowser-topbar .editing-button-view.active .editing-icon { +.scrivito-resourcebrowser .scrivito-resourcebrowser-topbar .editing-button-view:hover .scrivito-resourcebrowser-icon, +.scrivito-resourcebrowser .scrivito-resourcebrowser-topbar .editing-button-view.active .scrivito-resourcebrowser-icon { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; color: #7EA46A; } -.editing-resourcebrowser .editing-resourcebrowser-filter, -.editing-resourcebrowser .editing-resourcebrowser-items, -.editing-resourcebrowser .editing-resourcebrowser-inspector { +.scrivito-resourcebrowser .scrivito-resourcebrowser-filter, +.scrivito-resourcebrowser .scrivito-resourcebrowser-items, +.scrivito-resourcebrowser .scrivito-resourcebrowser-inspector { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #eee; float: left; @@ -241,37 +241,37 @@ overflow: auto; position: relative; -webkit-overflow-scrolling: touch; } -.editing-resourcebrowser .editing-resourcebrowser-filter { +.scrivito-resourcebrowser .scrivito-resourcebrowser-filter { background-color: #fafafa; -webkit-box-shadow: 0 -3px 4px -3px #bbb inset,0 3px 4px -3px #bbb inset; -moz-box-shadow: 0 -3px 4px -3px #bbb inset,0 3px 4px -3px #bbb inset; box-shadow: 0 -3px 4px -3px #bbb inset,0 3px 4px -3px #bbb inset; padding: 0; width: 17%; } -.editing-resourcebrowser .editing-resourcebrowser-items { +.scrivito-resourcebrowser .scrivito-resourcebrowser-items { background: #CCCCCC; -webkit-box-shadow: 0 0 4px #666 inset; -moz-box-shadow: 0 0 4px #666 inset; box-shadow: 0 0 4px #666 inset; padding: 0; width: 83%; } -.editing-resourcebrowser .editing-resourcebrowser-inspector { +.scrivito-resourcebrowser .scrivito-resourcebrowser-inspector { -webkit-box-shadow: 0 -3px 4px -3px #bbbbbb inset; -moz-box-shadow: 0 -3px 4px -3px #bbbbbb inset; box-shadow: 0 -3px 4px -3px #bbbbbb inset; padding: 0 15px; width: 30%; } -.editing-resourcebrowser .editing-resourcebrowser-footer { +.scrivito-resourcebrowser .scrivito-resourcebrowser-footer { background: #eee; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *zoom: 1; @@ -283,71 +283,71 @@ position: absolute; text-align: right; width: 100%; } -.editing-resourcebrowser .editing-resourcebrowser-footer:before, -.editing-resourcebrowser .editing-resourcebrowser-footer:after { +.scrivito-resourcebrowser .scrivito-resourcebrowser-footer:before, +.scrivito-resourcebrowser .scrivito-resourcebrowser-footer:after { display: table; content: ""; line-height: 0; } -.editing-resourcebrowser .editing-resourcebrowser-footer:after { +.scrivito-resourcebrowser .scrivito-resourcebrowser-footer:after { clear: both; } -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items { display: block; list-style-type: none; margin: 0; padding: 0; } -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items li { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items li { *zoom: 1; border-bottom: 1px solid #eee; border-top: 1px solid #fff; display: block; margin: 0; padding: 8px 5px 8px 8px; } -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items li:before, -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items li:after { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items li:before, +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items li:after { display: table; content: ""; line-height: 0; } -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items li:after { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items li:after { clear: both; } -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items li:first-child { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items li:first-child { border-top: 1px solid transparent; } -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items li:hover, -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items li.active { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items li:hover, +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items li.active { background: #7EA46A; border-bottom: 1px solid #658B51; border-top: 1px solid #658B51; cursor: pointer; position: relative; z-index: 2; } -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items li:hover .editing-icon, -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items li.active .editing-icon, -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items li:hover .editing-resourcebrowser-filter-name, -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items li.active .editing-resourcebrowser-filter-name { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items li:hover .scrivito-resourcebrowser-icon, +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items li.active .scrivito-resourcebrowser-icon, +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items li:hover .scrivito-resourcebrowser-filter-name, +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items li.active .scrivito-resourcebrowser-filter-name { color: #fff; text-shadow: 0 1px 1px #888; } -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items li.separator { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items li.separator { background-color: #f8f8f8; background-image: -moz-linear-gradient(top, #ffffff, #eeeeee); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#eeeeee)); background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee); background-image: -o-linear-gradient(top, #ffffff, #eeeeee); @@ -362,26 +362,26 @@ padding: 0; position: relative; z-index: 2; } -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items li.selected-items { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items li.selected-items { -webkit-box-shadow: 0 0 3px #cccccc inset; -moz-box-shadow: 0 0 3px #cccccc inset; box-shadow: 0 0 3px #cccccc inset; background: #eee; } -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items li.selected-items:hover, -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items li.selected-items.active { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items li.selected-items:hover, +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items li.selected-items.active { -webkit-box-shadow: 0 0 3px #333333 inset; -moz-box-shadow: 0 0 3px #333333 inset; box-shadow: 0 0 3px #333333 inset; background: #5A8BD1; } -.editing-resourcebrowser .editing-resourcebrowser-counter { +.scrivito-resourcebrowser .scrivito-resourcebrowser-counter { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; background: #444; color: #fff; @@ -391,43 +391,43 @@ line-height: 11px; margin: 1px -5px 0 7px; padding: 1px 6px; } -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items .editing-icon { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items .scrivito-resourcebrowser-icon { color: #666; display: inline; - font-size: 12px; + font-size: 22px; line-height: 20px; padding: 0 7px 0 0; text-shadow: 0 1px 1px #fff; } -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items .editing-resourcebrowser-filter-name { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items .scrivito-resourcebrowser-filter-name { color: #666; display: inline; font-size: 11px; font-weight: bold; line-height: 20px; word-wrap: break-word; } -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items li:hover .editing-resourcebrowser-counter, -.editing-resourcebrowser ul.editing-resourcebrowser-filter-items li.active .editing-resourcebrowser-counter { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items li:hover .scrivito-resourcebrowser-counter, +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-filter-items li.active .scrivito-resourcebrowser-counter { background: #fff; color: #5a8bd1; text-shadow: 0 0 0 #fff; } -.editing-resourcebrowser .editing-resourcebrowser-items.uploader-drag-over { +.scrivito-resourcebrowser .scrivito-resourcebrowser-items.uploader-drag-over { background: #658b51; -webkit-box-shadow: 0 0 4px #333333 inset; -moz-box-shadow: 0 0 4px #333333 inset; box-shadow: 0 0 4px #333333 inset; } -.editing-resourcebrowser .editing-resourcebrowser-items.uploader-drag-over:before { +.scrivito-resourcebrowser .scrivito-resourcebrowser-items.uploader-drag-over:before { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; @@ -443,24 +443,24 @@ top: 50%; vertical-align: middle; width: 83%; } -.editing-resourcebrowser .editing-resourcebrowser-items.uploader-drag-over ul.editing-resourcebrowser-thumbnails { +.scrivito-resourcebrowser .scrivito-resourcebrowser-items.uploader-drag-over ul.scrivito-resourcebrowser-thumbnails { opacity: 0.3; filter: alpha(opacity=30); } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails { display: block; list-style-type: none; margin: 0; overflow: hidden; padding: 15px 0 0 15px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails li { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails li { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 4px #888888; -moz-box-shadow: 0 0 4px #888888; @@ -478,35 +478,39 @@ overflow: hidden; padding: 0; width: 200px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails li:hover { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails li:hover { -webkit-box-shadow: 0 0 7px 0px #555555; -moz-box-shadow: 0 0 7px 0px #555555; box-shadow: 0 0 7px 0px #555555; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; cursor: pointer; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails li.active { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails li.active { -webkit-box-shadow: 0 0 3px 4px #658B51; -moz-box-shadow: 0 0 3px 4px #658B51; box-shadow: 0 0 3px 4px #658B51; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails li .editing-resourcebrowser-preview { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails li .scrivito-resourcebrowser-item-wrapper { + position: relative; +} + +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails li .scrivito-resourcebrowser-preview { background: #eee; height: 160px; overflow: hidden; position: relative; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails li .editing-resourcebrowser-preview img { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails li .scrivito-resourcebrowser-preview img { display: block; max-height: 100%; max-width: 100%; margin: auto; position: absolute; @@ -514,52 +518,52 @@ left: 0; right: 0; bottom: 0; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails li .editing-resourcebrowser-preview .editing-icon { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails li .scrivito-resourcebrowser-preview .scrivito-resourcebrowser-icon { color: #bfbfbf; display: block; float: none; - font-size: 50px; + font-size: 100px; line-height: 160px; text-align: center; text-shadow: 0 1px 1px #fff; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails li .editing-resourcebrowser-meta { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails li .scrivito-resourcebrowser-meta { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 40px; padding: 5px 35px 5px 5px; position: relative; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails li .editing-resourcebrowser-thumbnails-name { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails li .scrivito-resourcebrowser-thumbnails-name { color: #555; display: block; font-size: 11px; font-weight: bold; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails li .editing-resourcebrowser-thumbnails-size { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails li .scrivito-resourcebrowser-thumbnails-size { color: #aaa; display: block; font-size: 10px; font-weight: bold; line-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails li .editing-resourcebrowser-inspect:before { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails li .scrivito-resourcebrowser-inspect:before { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; @@ -583,11 +587,11 @@ width: 40px; font-size: 11px; z-index: 1; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails li .editing-resourcebrowser-thumbnails-select:before { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails li .scrivito-resourcebrowser-thumbnails-select:before { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; @@ -610,94 +614,156 @@ vertical-align: middle; width: 40px; font-size: 11px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails li .editing-resourcebrowser-thumbnails-select.active:before { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails li .scrivito-resourcebrowser-thumbnails-select.active:before { background: #7EA46A; color: #fff; content: '\F02B'; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails.small li { +/* normal-list */ + +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.normal-list { + padding-right: 15px; +} + +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.normal-list li { + height: 35px; + width: 100%; + margin: 0 0 10px 0; +} + +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.normal-list li .scrivito-resourcebrowser-preview { + display: none; +} + +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.normal-list li .scrivito-resourcebrowser-meta { + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 0px 25px 0px 45px; +} + +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.normal-list li .scrivito-resourcebrowser-thumbnails-name { + font-size: 12px; + font-weight: normal; + line-height: 35px; +} + +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.normal-list li .scrivito-resourcebrowser-thumbnails-size { + font-size: 9px; + line-height: 13px; +} + +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.normal-list li .scrivito-resourcebrowser-thumbnails-select:before { + font-size: 9px; + height: 35px; + line-height: 37px; + width: 40px; + position: absolute; + top: 0; + left: 0; +} + +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.normal-list li .scrivito-resourcebrowser-inspect:before { + font-size: 9px; + line-height: 37px; +} + +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.normal-list .scrivito-resourcebrowser-loading .scrivito-resourcebrowser-icon { + font-size: 25px; +} + +/* small */ + +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.small li { height: 100px; width: 130px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails.small li .editing-resourcebrowser-preview { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.small li .scrivito-resourcebrowser-preview { height: 70px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails.small li .editing-resourcebrowser-preview .editing-icon { - font-size: 20px; +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.small li .scrivito-resourcebrowser-preview .scrivito-resourcebrowser-icon { + font-size: 40px; line-height: 70px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails.small li .editing-resourcebrowser-meta { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.small li .scrivito-resourcebrowser-meta { height: 30px; padding: 2px 25px 0px 5px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails.small li .editing-resourcebrowser-thumbnails-name { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.small li .scrivito-resourcebrowser-thumbnails-name { font-size: 10px; line-height: 28px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails.small li .editing-resourcebrowser-thumbnails-size { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.small li .scrivito-resourcebrowser-thumbnails-size { font-size: 9px; line-height: 13px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails.small li .editing-resourcebrowser-thumbnails-select:before { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.small li .scrivito-resourcebrowser-thumbnails-select:before { font-size: 9px; height: 30px; line-height: 32px; width: 30px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails.big li { +/* big */ + +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.big li { height: 300px; width: 300px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails.big li .editing-resourcebrowser-preview { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.big li .scrivito-resourcebrowser-preview { height: 260px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails.big li .editing-resourcebrowser-preview .editing-icon { - font-size: 60px; +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.big li .scrivito-resourcebrowser-preview .scrivito-resourcebrowser-icon { + font-size: 120px; line-height: 260px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails.large li { +/* large */ + +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.large li { height: 400px; width: 400px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails.large li .editing-resourcebrowser-preview { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.large li .scrivito-resourcebrowser-preview { height: 360px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails.large li .editing-resourcebrowser-preview .editing-icon { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.large li .scrivito-resourcebrowser-preview .scrivito-resourcebrowser-icon { line-height: 360px; - font-size: 70px; + font-size: 140px; } -.editing-resourcebrowser .editing-resourcebrowser-inspector h3 { +/* */ + +.scrivito-resourcebrowser .scrivito-resourcebrowser-inspector h3 { color: #666; font-size: 14px; line-height: 32px; } -.editing-resourcebrowser .editing-resourcebrowser-inspector h3 .editing-icon { +.scrivito-resourcebrowser .scrivito-resourcebrowser-inspector h3 .scrivito-resourcebrowser-icon { color: #666; - font-size: 12px; + font-size: 24px; line-height: 32px; padding: 0 5px 0; } -.editing-resourcebrowser .editing-resourcebrowser-inspector h3 .editing-button { +.scrivito-resourcebrowser .scrivito-resourcebrowser-inspector h3 .editing-button { background-color: #f8f8f8; background-image: -moz-linear-gradient(top, #ffffff, #eeeeee); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#eeeeee)); background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee); background-image: -o-linear-gradient(top, #ffffff, #eeeeee); @@ -731,11 +797,11 @@ text-align: center; text-shadow: 0 1px 0 #fff; vertical-align: middle; } -.editing-resourcebrowser .editing-resourcebrowser-inspector h3 .editing-button:hover { +.scrivito-resourcebrowser .scrivito-resourcebrowser-inspector h3 .editing-button:hover { background-color: #fbfbfb; background-image: -moz-linear-gradient(top, #ffffff, #f6f6f6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f6f6f6)); background-image: -webkit-linear-gradient(top, #ffffff, #f6f6f6); background-image: -o-linear-gradient(top, #ffffff, #f6f6f6); @@ -745,11 +811,11 @@ border: 1px solid #ccc; color: #333; cursor: pointer; } -.editing-resourcebrowser .editing-resourcebrowser-inspector h3 .editing-button:active { +.scrivito-resourcebrowser .scrivito-resourcebrowser-inspector h3 .editing-button:active { background-color: #e0e0e0; background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#cccccc)); background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); background-image: -o-linear-gradient(top, #eeeeee, #cccccc); @@ -759,11 +825,11 @@ border: 1px solid #bbb; color: #333; cursor: pointer; } -.editing-resourcebrowser .editing-resourcebrowser-inspector h3 .editing-button .editing-icon { +.scrivito-resourcebrowser .scrivito-resourcebrowser-inspector h3 .editing-button .scrivito-resourcebrowser-icon { color: #888; font-size: 8px; line-height: 20px; margin: 0; padding: 0; @@ -774,62 +840,61 @@ font-size: 15px; font-weight: bold; text-align: center; } -.no-editing-available .editing-icon { +.no-editing-available .scrivito-resourcebrowser-icon { color: #e3e3e3; display: block; font-size: 85px; line-height: 200px; text-align: center; text-shadow: 0 1px 0 #ddd; } -.editing-resourcebrowser-loading { +.scrivito-resourcebrowser-loading { clear: both; height: 100%; overflow: hidden; position: relative; } -.editing-resourcebrowser-loading .editing-icon { +.scrivito-resourcebrowser-loading .scrivito-resourcebrowser-icon { color: #666; display: block; - font-size: 25px; + font-size: 50px; + line-height: 0; left: 0; margin: 0 auto; position: absolute; text-align: center; - top: 46%; + 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; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails .editing-resourcebrowser-loading .editing-icon { +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails .scrivito-resourcebrowser-loading .scrivito-resourcebrowser-icon { color: #ddd; - font-size: 25px; - top: 38%; + font-size: 50px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails.small .editing-resourcebrowser-loading .editing-icon { - font-size: 15px; - top: 35%; +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.small .scrivito-resourcebrowser-loading .scrivito-resourcebrowser-icon { + font-size: 30px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails.big .editing-resourcebrowser-loading .editing-icon { - font-size: 40px; +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.big .scrivito-resourcebrowser-loading .scrivito-resourcebrowser-icon { + font-size: 80px; } -.editing-resourcebrowser ul.editing-resourcebrowser-thumbnails.large .editing-resourcebrowser-loading .editing-icon { - font-size: 50px; +.scrivito-resourcebrowser ul.scrivito-resourcebrowser-thumbnails.large .scrivito-resourcebrowser-loading .scrivito-resourcebrowser-icon { + font-size: 100px; } -.editing-resourcebrowser-progress-wrapper { +.scrivito-resourcebrowser-progress-wrapper { -webkit-box-shadow: 0 0 3px #bbbbbb; -moz-box-shadow: 0 0 3px #bbbbbb; box-shadow: 0 0 3px #bbbbbb; background: rgba(255, 255, 255, 0.6); border-radius: 3px; @@ -839,53 +904,53 @@ position: absolute; top: 0; width: 80%; } -.editing-resourcebrowser-progress-wrapper .editing-resourcebrowser-progress-file { +.scrivito-resourcebrowser-progress-wrapper .scrivito-resourcebrowser-progress-file { border-top: 1px solid #ccc; margin: 2px 0 0 0; padding: 5px; } -.editing-resourcebrowser-progress-wrapper .editing-resourcebrowser-progress-file:first-child { +.scrivito-resourcebrowser-progress-wrapper .scrivito-resourcebrowser-progress-file:first-child { border: none; margin: 0; } -.editing-resourcebrowser-progress-wrapper .editing-resourcebrowser-progress-file p { +.scrivito-resourcebrowser-progress-wrapper .scrivito-resourcebrowser-progress-file p { color: #555; font-size: 13px; font-weight: bold; margin: 0 3px 6px 3px; overflow: hidden; text-overflow: ellipsis; } -.editing-resourcebrowser-progress-wrapper .editing-resourcebrowser-progress-file .editing-resourcebrowser-error:empty { +.scrivito-resourcebrowser-progress-wrapper .scrivito-resourcebrowser-progress-file .scrivito-resourcebrowser-error:empty { display: none; } -.editing-resourcebrowser-progress-wrapper .editing-resourcebrowser-progress-file .editing-resourcebrowser-error { +.scrivito-resourcebrowser-progress-wrapper .scrivito-resourcebrowser-progress-file .scrivito-resourcebrowser-error { color: #aa4040; font-size: 13px; font-weight: normal; margin: 0 3px 6px 3px; } -.editing-resourcebrowser-progress-wrapper .editing-resourcebrowser-progress { +.scrivito-resourcebrowser-progress-wrapper .scrivito-resourcebrowser-progress { -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-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; } -.editing-resourcebrowser-progress-wrapper .editing-resourcebrowser-progress .editing-resourcebrowser-progress-bar { +.scrivito-resourcebrowser-progress-wrapper .scrivito-resourcebrowser-progress .scrivito-resourcebrowser-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); @@ -1010,21 +1075,21 @@ } } @media (min-width: 769px) and (max-width: 979px) { - .editing-resourcebrowser { + .scrivito-resourcebrowser { height: 90%; width: 90%; } } @media (max-width: 768px) { } @media (max-width: 480px) { - .editing-resourcebrowser { + .scrivito-resourcebrowser { height: 95%; width: 95%; } }