summaryrefslogtreecommitdiffstats
path: root/core/css/styles.css
diff options
context:
space:
mode:
Diffstat (limited to 'core/css/styles.css')
-rw-r--r--core/css/styles.css350
1 files changed, 56 insertions, 294 deletions
diff --git a/core/css/styles.css b/core/css/styles.css
index ce0d5abfc78..bf78af15af5 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -145,18 +145,25 @@ a.disabled, a.disabled:hover, a.disabled:focus {
.searchbox input[type="search"] { font-size:1.2em; padding:.2em .5em .2em 1.5em; background:#fff url('../img/actions/search.svg') no-repeat .5em center; border:0; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70);opacity:.7; -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms; margin-top:10px; float:right; }
input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; -webkit-box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; box-shadow:0 1px 1px #f8f8f8, 0 1px 1px #cfc inset; }
-#select_all{ margin-top:.4em }
+
+
/* CONTENT ------------------------------------------------------------------ */
#controls {
- position:fixed;
- height:2.8em; width:100%;
- padding:0 70px 0 0.5em; margin:0;
- -moz-box-sizing:border-box; box-sizing:border-box;
- -moz-box-shadow:0 -3px 7px #000; -webkit-box-shadow:0 -3px 7px #000; box-shadow:0 -3px 7px #000;
- background:#eee; border-bottom:1px solid #e7e7e7; z-index:50;
+ position: fixed;
+ height: 36px;
+ width: 100%;
+ padding: 0 75px 0 6px;
+ margin: 0;
+ background: #eee;
+ border-bottom: 1px solid #e7e7e7;
+ z-index: 50;
+ -moz-box-sizing: border-box; box-sizing: border-box;
+ -moz-box-shadow: 0 -3px 7px #000; -webkit-box-shadow: 0 -3px 7px #000; box-shadow: 0 -3px 7px #000;
+}
+#controls .button {
+ display: inline-block;
}
-#controls .button { display:inline-block; }
#content { position:relative; height:100%; width:100%; }
#content .hascontrols { position: relative; top: 2.9em; }
@@ -176,7 +183,14 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b
#leftcontent a { height:100%; display:block; margin:0; padding:0 1em 0 0; float:left; }
#rightcontent, .rightcontent { position:fixed; top:6.4em; left:24.5em; overflow:auto }
-
+#emptycontent {
+ font-size:1.5em; font-weight:bold;
+ color:#888; text-shadow:#fff 0 1px 0;
+ position: absolute;
+ text-align: center;
+ top: 50%;
+ width: 100%;
+}
/* LOG IN & INSTALLATION ------------------------------------------------------------ */
@@ -501,6 +515,9 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
#navigation:hover {
overflow-y: auto; /* show scrollbar only on hover */
}
+#apps {
+ height: 100%;
+}
#navigation a span {
display: block;
text-decoration: none;
@@ -545,9 +562,24 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
padding-top: 20px;
}
+/* Apps management as sticky footer, less obtrusive in the list */
+#navigation .wrapper {
+ min-height: 100%;
+ margin: 0 auto -72px;
+}
+#apps-management, #navigation .push {
+ height: 70px;
+}
#apps-management {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+ filter: alpha(opacity=60);
opacity: .6;
}
+#apps-management .icon {
+ padding-bottom: 0;
+}
+
+
/* USER MENU */
@@ -658,8 +690,21 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
background-color:white;
width:100%;
}
-#oc-dialog-filepicker-content .filelist img { margin: 2px 1em 0 4px; }
-#oc-dialog-filepicker-content .filelist .date { float:right;margin-right:1em; }
+#oc-dialog-filepicker-content .filelist li {
+ position: relative;
+}
+#oc-dialog-filepicker-content .filelist .filename {
+ position: absolute;
+ top: 8px;
+}
+#oc-dialog-filepicker-content .filelist img {
+ margin: 2px 1em 0 4px;
+}
+#oc-dialog-filepicker-content .filelist .date {
+ float: right;
+ margin-right: 1em;
+ margin-top: 8px;
+}
#oc-dialog-filepicker-content .filepicker_element_selected { background-color:lightblue;}
.ui-dialog {position:fixed !important;}
span.ui-icon {float: left; margin: 3px 7px 30px 0;}
@@ -709,286 +754,3 @@ div.crumb:active {
opacity:.7;
}
-
-
-/* ---- APP STYLING ---- */
-#app {
- height: 100%;
- width: 100%;
-}
-#app * {
- -moz-box-sizing: border-box; box-sizing: border-box;
-}
-
-/* Navigation: folder like structure */
-#app-navigation {
- width: 300px;
- height: 100%;
- float: left;
- -moz-box-sizing: border-box; box-sizing: border-box;
- background-color: #f8f8f8;
- border-right: 1px solid #ccc;
-}
-#app-navigation > ul {
- height: 100%;
- overflow: auto;
- -moz-box-sizing: border-box; box-sizing: border-box;
-}
-#app-navigation li {
- position: relative;
- width: 100%;
- -moz-box-sizing: border-box; box-sizing: border-box;
- text-shadow: 0 1px 0 rgba(255,255,255,.9);
-}
-#app-navigation .active,
-#app-navigation .active a,
-#app-navigation li:hover > a {
- background-color: #ddd;
- text-shadow: 0 1px 0 rgba(255,255,255,.7);
-}
-
-/* special rules for first-level entries and folders */
-#app-navigation > ul > li {
- background-color: #f8f8f8;
-}
-
-#app-navigation .with-icon a {
- padding-left: 44px;
- background-size: 16px 16px;
- background-position: 14px center;
- background-repeat: no-repeat;
-}
-
-#app-navigation li > a {
- display: block;
- width: 100%;
- height: 44px;
- padding: 12px;
- overflow: hidden;
- -moz-box-sizing: border-box; box-sizing: border-box;
- white-space: nowrap;
- text-overflow: ellipsis;
- color: #333;
-}
-
-#app-navigation .collapse {
- display: none; /* hide collapse button intially */
-}
-#app-navigation .collapsible > .collapse {
- position: absolute;
- height: 44px;
- width: 44px;
- margin: 0;
- padding: 0;
- background: none; background-image: url('../img/actions/triangle-s.svg');
- background-size: 16px; background-repeat: no-repeat; background-position: center;
- border: none;
- border-radius: 0;
- outline: none !important;
- box-shadow: none;
-}
-#app-navigation .collapsible:hover > a {
- background-image: none;
-}
-#app-navigation .collapsible:hover > .collapse {
- display: block;
-}
-
-#app-navigation .collapsible .collapse {
- -moz-transform: rotate(-90deg);
- -webkit-transform: rotate(-90deg);
- -ms-transform:rotate(-90deg);
- -o-transform:rotate(-90deg);
- transform: rotate(-90deg);
-}
-#app-navigation .collapsible.open .collapse {
- -moz-transform: rotate(0);
- -webkit-transform: rotate(0);
- -ms-transform:rotate(0);
- -o-transform:rotate(0);
- transform: rotate(0);
-}
-
-/* Second level nesting for lists */
-#app-navigation > ul ul {
- display: none;
-}
-#app-navigation > ul ul li > a {
- padding-left: 32px;
-}
-#app-navigation > .with-icon ul li > a {
- padding-left: 48px;
- background-position: 24px center;
-}
-
-#app-navigation .open {
- background-image: linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
- background-image: -o-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
- background-image: -moz-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
- background-image: -webkit-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
- background-image: -ms-linear-gradient(top, rgb(238,238,238) 0%, rgb(245,245,245) 100%);
-}
-
-#app-navigation > ul .open:hover {
- -moz-box-shadow: inset 0 0 3px #ccc; -webkit-box-shadow: inset 0 0 3px #ccc; box-shadow: inset 0 0 3px #ccc;
-}
-
-#app-navigation > ul .open ul {
- display: block;
-}
-
-
-/* counter and actions */
-#app-navigation .utils {
- position: absolute;
- right: 0;
- top: 0;
- bottom: 0;
- font-size: 12px;
-}
- #app-navigation .utils button,
- #app-navigation .utils .counter {
- width: 44px;
- height: 44px;
- padding-top: 12px;
- }
-
-
-/* drag and drop */
-#app-navigation .drag-and-drop {
- -moz-transition: padding-bottom 500ms ease 0s;
- -o-transition: padding-bottom 500ms ease 0s;
- -webkit-transition: padding-bottom 500ms ease 0s;
- -ms-transition: padding-bottom 500ms ease 0s;
- transition: padding-bottom 500ms ease 0s;
- padding-bottom: 40px;
-}
-#app-navigation .personalblock > legend { /* TODO @Raydiation: still needed? */
- padding: 10px 0; margin: 0;
-}
-#app-navigation .error {
- color: #dd1144;
-}
-
-#app-navigation .app-navigation-separator {
- border-bottom: 1px solid #ddd;
-}
-
-
-
-/* Part where the content will be loaded into */
-#app-content {
- height: 100%;
- overflow-y: auto;
-}
-
-/* settings area */
-#app-settings {
- position: fixed;
- width: 299px;
- bottom: 0;
- border-top: 1px solid #ccc;
-}
-#app-settings-header {
- background-color: #eee;
-}
-#app-settings-content {
- display: none;
- padding: 10px;
- background-color: #eee;
-}
-#app-settings.open #app-settings-content {
- display: block;
-}
-
-.settings-button {
- display: block;
- height: 32px;
- width: 100%;
- padding: 0;
- margin: 0;
- background-color: transparent; background-image: url('../img/actions/settings.svg');
- background-position: 10px center; background-repeat: no-repeat;
- box-shadow: none;
- border: 0;
- border-radius: 0;
-}
-.settings-button:hover {
- background-color: #ddd;
-}
-
-/* icons */
-.folder-icon, .delete-icon, .edit-icon, .progress-icon {
- background-repeat: no-repeat;
- background-position: center;
-}
-.folder-icon { background-image: url('../img/places/folder.svg'); }
-.delete-icon { background-image: url('../img/actions/delete.svg'); }
-.delete-icon:hover, .delete-icon:focus {
- background-image: url('../img/actions/delete-hover.svg');
-}
-.edit-icon { background-image: url('../img/actions/rename.svg'); }
-.progress-icon {
- background-image: url('../img/loading.gif');
- background-size: 16px;
- /* force show the loading icon, not only on hover */
- -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
- filter:alpha(opacity=100);
- opacity: 1 !important;
- display: inline !important;
-}
-
-/* buttons */
-button.loading {
- background-image: url('../img/loading.gif');
- background-position: right 10px center; background-repeat: no-repeat;
- background-size: 16px;
- padding-right: 30px;
-}
-
-
-
-
-
-/* ---- BROWSER-SPECIFIC FIXES ---- */
-
-/* remove dotted outlines in Firefox */
-::-moz-focus-inner {
- border: 0;
-}
-.lte8 .delete-icon { background-image: url('../img/actions/delete.png'); }
-.lte8 .delete-icon:hover, .delete-icon:focus {
- background-image: url('../img/actions/delete-hover.png');
-}
-
-/* IE8 needs background to be set to same color to make transparency look good. */
-.lte9 #body-login form input[type="text"] {
- border: 1px solid lightgrey; /* use border to add 1px line between input fields */
- background-color: white; /* don't change background on hover */
-}
-.lte9 #body-login form input[type="password"] {
- /* leave out top border for 1px line between input fields*/
- border-left: 1px solid lightgrey;
- border-right: 1px solid lightgrey;
- border-bottom: 1px solid lightgrey;
- background-color: white; /* don't change background on hover */
-}
-.lte9 #body-login form label.infield {
- background-color: white; /* don't change background on hover */
- -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='white')";
-}
-/* disable opacity of info text on gradient
- sice we cannot set a good backround color to use the filter&background hack as with the input labels */
-.lte9 #body-login p.info {
- filter: initial;
-}
-/* deactivate show password toggle for IE. Does not work for 8 and 9+ have their own implementation. */
-.ie #show, .ie #show+label {
- display: none;
- visibility: hidden;
-}
-
-/* fix installation screen rendering issue for IE8+9 */
-.lte9 #body-login {
- height: auto !important;
-}
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-25 13:52:47 +0000