mirror of
https://github.com/nextcloud/server.git
synced 2026-02-03 20:41:22 -05:00
ef028fcd9a
use less right padding better styling, fix padding issues no special color for undo nav entry fix fallback width use class for button
538 lines
12 KiB
CSS
538 lines
12 KiB
CSS
/* APP STYLING -------------------------------------------------------------- */
|
|
|
|
|
|
#app {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
#app * {
|
|
-moz-box-sizing: border-box; box-sizing: border-box;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* APP-NAVIGATION ------------------------------------------------------------*/
|
|
|
|
|
|
/* Navigation: folder like structure */
|
|
#app-navigation {
|
|
width: 250px;
|
|
height: 100%;
|
|
float: left;
|
|
-moz-box-sizing: border-box; box-sizing: border-box;
|
|
background-color: #f5f5f5;
|
|
padding-bottom: 44px;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
#app-navigation > ul {
|
|
position: relative;
|
|
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;
|
|
}
|
|
#app-navigation .active,
|
|
#app-navigation .active a {
|
|
background-color: #ddd;
|
|
}
|
|
|
|
#app-navigation .active.with-menu > a,
|
|
#app-navigation .with-counter > a {
|
|
padding-right: 50px;
|
|
}
|
|
|
|
#app-navigation .active.with-menu.with-counter > a {
|
|
padding-right: 90px;
|
|
}
|
|
|
|
#app-navigation li:hover > a,
|
|
#app-navigation .selected,
|
|
#app-navigation .selected a {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
#app-navigation .with-icon a,
|
|
#app-navigation .app-navigation-entry-loading a {
|
|
padding-left: 44px;
|
|
background-size: 16px 16px;
|
|
background-position: 14px center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
#app-navigation li > a {
|
|
display: block;
|
|
width: 100%;
|
|
line-height: 44px;
|
|
padding: 0 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,
|
|
#app-navigation > .with-icon ul li.app-navigation-entry-loading > a {
|
|
padding-left: 68px;
|
|
background-position: 44px center;
|
|
}
|
|
|
|
#app-navigation .collapsible.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 .collapsible.open:hover {
|
|
box-shadow: inset 0 0 3px #ccc;
|
|
}
|
|
|
|
#app-navigation > ul .collapsible.open ul {
|
|
display: block;
|
|
}
|
|
|
|
|
|
/* Deleted entries with undo button */
|
|
#app-navigation .app-navigation-entry-deleted {
|
|
display: inline-block;
|
|
height: 44px;
|
|
width: 100%;
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-deleted-description {
|
|
padding-left: 12px;
|
|
position: relative;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
width: 201px; /* fallback for IE8 */
|
|
width: calc(100% - 49px);
|
|
line-height: 44px;
|
|
float: left;
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-deleted-button {
|
|
margin: 0;
|
|
height: 44px;
|
|
width: 44px;
|
|
line-height: 44px;
|
|
border: 0;
|
|
display: inline-block;
|
|
background-color: transparent;
|
|
opacity: .5;
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-deleted-button:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* counter and actions, legacy code */
|
|
#app-navigation .utils {
|
|
position: absolute;
|
|
padding: 7px 7px 0 0;
|
|
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 .error {
|
|
color: #dd1144;
|
|
}
|
|
|
|
#app-navigation .app-navigation-separator {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
/**
|
|
* App navigation utils, buttons and counters for drop down menu
|
|
*/
|
|
#app-navigation .app-navigation-entry-utils {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 105;
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-utils ul {
|
|
display: block !important;
|
|
}
|
|
|
|
|
|
#app-navigation .app-navigation-entry-utils li {
|
|
float: left;
|
|
width: 44px !important;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
}
|
|
|
|
#app-navigation .active > .app-navigation-entry-utils li {
|
|
display: inline-block;
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-utils button {
|
|
height: 38px;
|
|
width: 38px;
|
|
line-height: 38px;
|
|
float: left;
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-utils-menu-button {
|
|
display: none;
|
|
}
|
|
#app-navigation .app-navigation-entry-utils-menu-button button {
|
|
border: 0;
|
|
opacity: .5;
|
|
background-color: transparent;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-image: url('../img/actions/more.svg');
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-utils-menu-button:hover button,
|
|
#app-navigation .app-navigation-entry-utils-menu-button:focus button {
|
|
background-color: transparent;
|
|
opacity: 1;
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-utils-counter {
|
|
overflow: hidden;
|
|
text-overflow: hidden;
|
|
text-align: right;
|
|
font-size: 9pt;
|
|
width: 38px;
|
|
line-height: 44px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-utils ul,
|
|
#app-navigation .app-navigation-entry-menu ul {
|
|
list-style-type: none;
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-menu {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: #eee;
|
|
color: #333;
|
|
border-radius: 3px;
|
|
border-top-right-radius: 0px;
|
|
z-index: 110;
|
|
margin: -5px 14px 5px 10px;
|
|
right: 0;
|
|
border: 1px solid #bbb;
|
|
-webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
|
-moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
|
-ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
|
-o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
|
filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75));
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-menu.open {
|
|
display: block;
|
|
}
|
|
|
|
/* miraculous border arrow stuff */
|
|
#app-navigation .app-navigation-entry-menu:after,
|
|
#app-navigation .app-navigation-entry-menu:before {
|
|
bottom: 100%;
|
|
right: 0; /* change this to adjust the arrow position */
|
|
border: solid transparent;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-menu:after {
|
|
border-color: rgba(238, 238, 238, 0);
|
|
border-bottom-color: #eee;
|
|
border-width: 10px;
|
|
margin-left: -10px;
|
|
}
|
|
#app-navigation .app-navigation-entry-menu:before {
|
|
border-color: rgba(187, 187, 187, 0);
|
|
border-bottom-color: #bbb;
|
|
border-width: 11px;
|
|
margin-left: -11px;
|
|
}
|
|
|
|
/* list of options for an entry */
|
|
#app-navigation .app-navigation-entry-menu ul {
|
|
display: block !important;
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-menu li {
|
|
float: left;
|
|
width: 38px !important;
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-menu li button {
|
|
float: right;
|
|
width: 36px !important;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
border: 0;
|
|
opacity: .5;
|
|
background-color: transparent;
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-menu li button:hover,
|
|
#app-navigation .app-navigation-entry-menu li button:focus {
|
|
opacity: 1;
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* editing an entry */
|
|
#app-navigation .app-navigation-entry-edit {
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
display: inline-block;
|
|
height: 39px;
|
|
width: 100%;
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-edit input {
|
|
border-bottom-right-radius: 0;
|
|
border-top-right-radius: 0;
|
|
width: 204px;
|
|
padding: 5px;
|
|
margin-right: 0;
|
|
height: 38px;
|
|
float: left;
|
|
border: 1px solid rgba(190,190,190,.9);
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-edit button,
|
|
#app-navigation .app-navigation-entry-edit input[type="submit"] {
|
|
width: 36px;
|
|
height: 38px;
|
|
float: left;
|
|
}
|
|
|
|
#app-navigation .app-navigation-entry-edit .icon-checkmark {
|
|
border-bottom-left-radius: 0;
|
|
border-top-left-radius: 0;
|
|
border-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
|
|
/* APP-CONTENT ---------------------------------------------------------------*/
|
|
|
|
|
|
/* Part where the content will be loaded into */
|
|
#app-content {
|
|
position: relative;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#app-content-wrapper {
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
}
|
|
|
|
|
|
|
|
/* APP-SETTINGS ---------------------------------------------------------------*/
|
|
|
|
/* settings area */
|
|
#app-settings {
|
|
position: fixed;
|
|
width: 250px; /* change to 100% when layout positions are absolute */
|
|
bottom: 0;
|
|
z-index: 140;
|
|
}
|
|
#app-settings.opened #app-settings-content {
|
|
display: block;
|
|
}
|
|
#app-settings-header {
|
|
background-color: #eee;
|
|
}
|
|
#app-settings-content {
|
|
display: none;
|
|
padding: 10px;
|
|
background-color: #eee;
|
|
}
|
|
#app-settings.open #app-settings-content {
|
|
display: block;
|
|
/* restrict height of settings and make scrollable */
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* display input fields at full width */
|
|
#app-settings-content input[type='text'] {
|
|
width: 93%;
|
|
}
|
|
|
|
.settings-button {
|
|
display: block;
|
|
height: 44px;
|
|
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,
|
|
.settings-button:focus {
|
|
background-color: #ddd;
|
|
}
|
|
.settings-button.opened:hover,
|
|
.settings-button.opened:focus {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* general styles for the content area */
|
|
.section {
|
|
display: block;
|
|
padding: 30px;
|
|
color: #555;
|
|
border-top: 1px solid #ddd;
|
|
}
|
|
/* no top border for first settings item */
|
|
.section:first-child {
|
|
border-top: none;
|
|
}
|
|
.section h2 {
|
|
font-size: 20px;
|
|
margin-bottom: 7px;
|
|
}
|
|
.section h3 {
|
|
font-size: 16px;
|
|
}
|
|
/* slight position correction of checkboxes and radio buttons */
|
|
.section input[type="checkbox"],
|
|
.section input[type="radio"] {
|
|
vertical-align: -2px;
|
|
margin-right: 4px;
|
|
}
|
|
.appear {
|
|
opacity: 1;
|
|
transition: opacity 500ms ease 0s;
|
|
-moz-transition: opacity 500ms ease 0s;
|
|
-ms-transition: opacity 500ms ease 0s;
|
|
-o-transition: opacity 500ms ease 0s;
|
|
-webkit-transition: opacity 500ms ease 0s;
|
|
}
|
|
.appear.transparent {
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
/* do not use italic typeface style, instead lighter color */
|
|
em {
|
|
font-style: normal;
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
|
filter: alpha(opacity=50);
|
|
opacity: .5;
|
|
}
|