Skip to content

Commit

Permalink
Update css for header notifications
Browse files Browse the repository at this point in the history 
Includes making them full width, opaque and animated
  • Loading branch information
Bugsbane authored Jul 24, 2016
1 parent a601fd5 commit 04a3f53
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 61 deletions.
12 changes: 3 additions & 9 deletions core/css/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
#body-user #header,
#body-settings #header,
#body-public #header {
position: fixed;
/* position: fixed;*/
top: 0;
left: 0;
right: 0;
Expand Down Expand Up @@ -68,7 +68,7 @@
}

#header .logo {
background-image: url('../img/logo-icon.svg');
background-image: url('../img/logo-icon.svg?v=1');
background-repeat: no-repeat;
background-size: 175px;
background-position: center 30px;
Expand All @@ -80,7 +80,7 @@
#header .logo-icon {
/* display logo so appname can be shown next to it */
display: inline-block;
background-image: url('../img/logo-icon.svg');
background-image: url('../img/logo-icon.svg?v=1');
background-repeat: no-repeat;
width: 62px;
height: 34px;
Expand Down Expand Up @@ -294,12 +294,6 @@
color: #ddd;
cursor: pointer;
}
#settings .icon-loading-small-dark {
display: inline-block;
margin-bottom: -3px;
margin-right: 6px;
background-size: 16px 16px;
}
#expand {
display: block;
padding: 7px 30px 6px 10px;
Expand Down
137 changes: 85 additions & 52 deletions core/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,22 +26,12 @@ body {
#body-login {
text-align: center;
background-color: #0082c9;
background-image: url('../img/background.jpg');
background-image: url('../img/background.jpg?v=1');
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}

.two-factor-provider {
text-align: center;
width: 100%;
display: inline-block;
}

a.two-factor-cancel {
color: #fff;
}

.float-spinner {
height: 32px;
display: none;
Expand Down Expand Up @@ -98,7 +88,7 @@ a.two-factor-cancel {
font-size: 1.2em;
padding: 3px;
padding-left: 25px;
background: transparent url('../img/actions/search-white.svg') no-repeat 6px center;
background: transparent url('../img/actions/search-white.svg?v=1') no-repeat 6px center;
color: #fff;
border: 0;
border-radius: 3px;
Expand Down Expand Up @@ -126,7 +116,7 @@ a.two-factor-cancel {
#controls {
box-sizing: border-box;
position: fixed;
top: 45px;
/* top: 45px;*/
right: 0;
left: 0;
height: 44px;
Expand Down Expand Up @@ -173,11 +163,11 @@ a.two-factor-cancel {
margin-top: 45px;
}
#content-wrapper {
position: absolute;
position: relative;
height: 100%;
width: 100%;
overflow-x: hidden; /* prevent horizontal scrollbar */
padding-top: 45px;
/* padding-top: 45px;*/
box-sizing:border-box;
}
/* allow horizontal scrollbar for personal and admin settings */
Expand All @@ -187,19 +177,17 @@ a.two-factor-cancel {

#emptycontent,
.emptycontent {
font-size: 16px;
color: #888;
text-align: center;
margin-top: 100px; /* ie8 */
margin-top: 30vh;
width: 100%;
}
#emptycontent.emptycontent-search,
.emptycontent.emptycontent-search {
position: static;
}
#emptycontent h2,
.emptycontent h2 {
font-weight: 600;
margin-bottom: 10px;
line-height: 150%;
}
#emptycontent [class^="icon-"],
.emptycontent [class^="icon-"],
Expand Down Expand Up @@ -232,7 +220,9 @@ a.two-factor-cancel {
#body-login form fieldset .warning-info,
#body-login form input[type="checkbox"]+label {
text-align: center;
color: #fff;
color: #ccc;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
opacity: .6;
}
/* overrides another !important statement that sets this to unreadable black */
#body-login form .warning input[type="checkbox"]:hover+label,
Expand Down Expand Up @@ -417,26 +407,36 @@ label.infield {
-ms-user-select: none;
user-select: none;
}

html.ie8 #body-login form input[type="checkbox"]+label {
margin-left: -28px;
margin-top: -3px;
vertical-align: auto;
}
html.ie8 #body-login form input[type="checkbox"] {
margin-top: 5px;
}
#body-login form .errors { background:#fed7d7; border:1px solid #f00; list-style-indent:inside; margin:0 0 2em; padding:1em; }
#body-login .success { background:#d7fed7; border:1px solid #0f0; width: 35%; margin: 30px auto; padding:1em; text-align: center;}

#body-login #remember_login:hover+label,
#body-login #remember_login:focus+label {
color: #fff !important;
}

#body-login #showAdvanced > img {
padding: 4px;
box-sizing: border-box;
}

#body-login p.info a, #body-login #showAdvanced {
color: #fff;
color: #ccc;
}

#body-login #remember_login:hover+label,
#body-login #remember_login:focus+label,
#body-login p.info a:hover,
#body-login p.info a:focus {
opacity: .6;
#body-login p.info a:hover, #body-login p.info a:focus {
color: #fff;
}


#body-login footer .info {
white-space: nowrap;
}
Expand Down Expand Up @@ -465,7 +465,7 @@ label.infield {
position: absolute !important;
height: 20px;
width: 24px;
background-image: url('../img/actions/toggle.svg');
background-image: url('../img/actions/toggle.svg?v=1');
background-repeat: no-repeat;
background-position: center;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
Expand Down Expand Up @@ -570,8 +570,9 @@ label.infield {
}

/* Fixes for log in page, TODO should be removed some time */
#body-login ul.error-wide {
margin-top: 35px;
#body-login .update,
#body-login .error {
margin: 35px auto;
}
#body-login .warning {
margin: 0 7px 5px 4px;
Expand Down Expand Up @@ -614,6 +615,8 @@ label.infield {
}
#remember_login {
margin: 18px 5px 0 16px !important;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
opacity: .7;
}
#body-login .remember-login-container {
margin-top: 10px;
Expand Down Expand Up @@ -643,33 +646,63 @@ td.avatar {


#notification-container {
position: absolute;
top: 0;
/* position: absolute;*/
/* margin-top: 45px;*/
width: 100%;
text-align: center;
overflow:hidden;
background-color: #c8ecff;

height:auto;
max-height:0;
-webkit-animation-name: notification-display; /* Chrome, Safari, Opera */
-webkit-animation-duration: 6s; /* Chrome, Safari, Opera */
animation-name: notification-display;
animation-duration: 6s;
}

/* Notification display animation for Chrome, Safari, Opera */
@-webkit-keyframes notification-display {
0% {max-height:0;}
16% {max-height:110px;}
84% {max-height:110px;}
100% {max-height:0;}
}

/* Notification display animation for other browsers */
@keyframes notification-display {
0% {max-height:0;}
16% {max-height:110px;}
84% {max-height:110px;}
100% {max-height:0;}
}

#notification {
margin: 0 auto;
max-width: 60%;
margin: auto auto;
width: 100%;
z-index: 8000;
background-color: #fff;
background: transparent;
border: 0;
padding: 1px 8px;
padding: 5px 0;
display: none;
position: relative;
top: 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
opacity: .9;


/* border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;*/
/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
opacity: .9;*/
}


#notification span {
cursor: pointer;
margin-left: 1em;
}
#notification {
overflow-x: hidden;
overflow-y: auto;
overflow-y: hidden;
max-height: 100px;
}
#notification .row {
Expand All @@ -681,7 +714,7 @@ td.avatar {
position: absolute;
right: 0;
top: 0;
margin-top: 2px;
/* margin-top: 2px;*/
}
#notification .row.closeable {
padding-right: 20px;
Expand Down Expand Up @@ -757,15 +790,15 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
.exception{color:#000;}
.exception textarea{width:95%;height:200px;background:#ffe;border:0;}

.ui-icon-circle-triangle-e{ background-image:url('../img/actions/play-next.svg'); }
.ui-icon-circle-triangle-w{ background-image:url('../img/actions/play-previous.svg'); }
.ui-icon-circle-triangle-e{ background-image:url('../img/actions/play-next.svg?v=1'); }
.ui-icon-circle-triangle-w{ background-image:url('../img/actions/play-previous.svg?v=1'); }

.ui-datepicker-prev,.ui-datepicker-next{ border:1px solid #ddd; background:#fff; }

/* ---- DIALOGS ---- */
#oc-dialog-filepicker-content .dirtree {width:92%; overflow:hidden; }
#oc-dialog-filepicker-content .dirtree .home {
background-image:url('../img/places/home.svg');
background-image:url('../img/places/home.svg?v=1');
background-repeat:no-repeat;
background-position: left center;
width: 30px;
Expand Down Expand Up @@ -805,6 +838,8 @@ a.bookmarklet { background-color:#ddd; border:1px solid #ccc; padding:5px;paddin
.ui-dialog {position:fixed !important;}
span.ui-icon {float: left; margin: 3px 7px 30px 0;}

.loading { background: url('../img/loading.gif?v=1') no-repeat center; cursor: wait; }
.loading-small { background: url('../img/loading-small.gif?v=1') no-repeat center; cursor: wait; }
.move2trash { /* decrease spinner size */
width: 16px;
height: 16px;
Expand Down Expand Up @@ -848,7 +883,7 @@ span.ui-icon {float: left; margin: 3px 7px 30px 0;}
}
.popup.topright { top:7em; right:1em; }
.popup.bottomleft { bottom:1em; left:33em; }
.popup .close { position:absolute; top:0.2em; right:0.2em; height:20px; width:20px; background:url('../img/actions/close.svg') no-repeat center; }
.popup .close { position:absolute; top:0.2em; right:0.2em; height:20px; width:20px; background:url('../img/actions/close.svg?v=1') no-repeat center; }
.popup h2 { font-size:20px; }
.arrow { border-bottom:10px solid white; border-left:10px solid transparent; border-right:10px solid transparent; display:block; height:0; position:absolute; width:0; z-index:201; }
.arrow.left { left:-13px; bottom:1.2em; -webkit-transform:rotate(270deg); -ms-transform:rotate(270deg); transform:rotate(270deg); }
Expand All @@ -860,9 +895,7 @@ span.ui-icon {float: left; margin: 3px 7px 30px 0;}
div.crumb {
float: left;
display: block;
background-image: url('../img/breadcrumb.svg');
background-repeat: no-repeat;
background-position: right center;
background: url('../img/breadcrumb.svg?v=1') no-repeat right center;
height: 44px;
background-size: auto 24px;
}
Expand Down Expand Up @@ -901,11 +934,11 @@ div.crumb:active {

.appear {
opacity: 1;
-webkit-transition: opacity 500ms ease 0s;
transition: opacity 500ms ease 0s;
-moz-transition: opacity 500ms ease 0s;
-ms-transition: opacity 500ms ease 0s;
-o-transition: opacity 500ms ease 0s;
transition: opacity 500ms ease 0s;
-webkit-transition: opacity 500ms ease 0s;
}
.appear.transparent {
opacity: 0;
Expand Down

0 comments on commit 04a3f53

Please sign in to comment.