diff --git a/RIGS/static/css/screen.css b/RIGS/static/css/screen.css index 292a8663..7b7ef71c 100644 --- a/RIGS/static/css/screen.css +++ b/RIGS/static/css/screen.css @@ -16,4 +16,4 @@ * Portions copyright Addy Osmani, jQuery UI & Twitter Bootstrap * Created the LESS version by $dharapvj * Released under MIT - */.ui-tooltip{display:block;font-size:11px;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);opacity:0.8;position:absolute;visibility:visible;z-index:1070;max-width:200px;background:#000;border:1px solid #000;color:#fff;padding:3px 8px;text-align:center;text-decoration:none;-moz-box-shadow:inset 0 1px 0 #000;-webkit-box-shadow:inset 0 1px 0 #000;box-shadow:inset 0 1px 0 #000;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;border-width:1px}.ui-tooltip .arrow{overflow:hidden;position:absolute;margin-left:0;height:20px;width:20px}.ui-tooltip .arrow.bottom{top:100%;left:38%}.ui-tooltip .arrow.bottom:after{border-top:8px solid #000;border-right:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid transparent}.ui-tooltip .arrow.top{top:-50%;bottom:22px;left:42%}.ui-tooltip .arrow.top:after{border-top:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #000;border-left:6px solid transparent}.ui-tooltip .arrow.left{top:25%;left:-15%;right:0;bottom:-16px}.ui-tooltip .arrow.left:after{width:0;border-top:6px solid transparent;border-right:6px solid #000;border-bottom:6px solid transparent;border-left:6px solid transparent}.ui-tooltip .arrow.right{top:26%;left:100%;right:0;bottom:-16px;margin-left:1px}.ui-tooltip .arrow.right:after{width:0;border-top:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #000}.ui-tooltip .arrow:after{content:" ";position:absolute;height:0;left:0;top:0;width:0;margin-left:0;bottom:12px;box-shadow:6px 5px 9px -9px #000}body,.pad-top{padding-top:50px}#content{padding:40px 15px}#userdropdown>li{padding:0 0.3em}#userdropdown>li .media-object,#activity .media-object{max-width:3em}.table tbody>tr>td.vert-align{vertical-align:middle}.align-right{text-align:right}textarea{width:100%;resize:vertical}.btn-page,.btn-pad{margin:0 0 0.5em}.custom-combobox{display:block}.event-mic-photo{max-width:2em}.item-description{margin-left:1em}.overflow-ellipsis{text-overflow:ellipsis;display:inline-block;max-width:100%;overflow:hidden}.modal-dialog{z-index:inherit}.panel-default .default{background-color:#f5f5f5} + */.ui-tooltip{display:block;font-size:11px;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);opacity:0.8;position:absolute;visibility:visible;z-index:1070;max-width:200px;background:#000;border:1px solid #000;color:#fff;padding:3px 8px;text-align:center;text-decoration:none;-moz-box-shadow:inset 0 1px 0 #000;-webkit-box-shadow:inset 0 1px 0 #000;box-shadow:inset 0 1px 0 #000;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;border-width:1px}.ui-tooltip .arrow{overflow:hidden;position:absolute;margin-left:0;height:20px;width:20px}.ui-tooltip .arrow.bottom{top:100%;left:38%}.ui-tooltip .arrow.bottom:after{border-top:8px solid #000;border-right:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid transparent}.ui-tooltip .arrow.top{top:-50%;bottom:22px;left:42%}.ui-tooltip .arrow.top:after{border-top:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #000;border-left:6px solid transparent}.ui-tooltip .arrow.left{top:25%;left:-15%;right:0;bottom:-16px}.ui-tooltip .arrow.left:after{width:0;border-top:6px solid transparent;border-right:6px solid #000;border-bottom:6px solid transparent;border-left:6px solid transparent}.ui-tooltip .arrow.right{top:26%;left:100%;right:0;bottom:-16px;margin-left:1px}.ui-tooltip .arrow.right:after{width:0;border-top:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid transparent;border-left:6px solid #000}.ui-tooltip .arrow:after{content:" ";position:absolute;height:0;left:0;top:0;width:0;margin-left:0;bottom:12px;box-shadow:6px 5px 9px -9px #000}body,.pad-top{padding-top:50px}#content{padding:40px 15px}#userdropdown>li{padding:0 0.3em}#userdropdown>li .media-object,#activity .media-object{max-width:3em}.table tbody>tr>td.vert-align{vertical-align:middle}.align-right{text-align:right}textarea{width:100%;resize:vertical}.btn-page,.btn-pad{margin:0 0 0.5em}.custom-combobox{display:block}.event-mic-photo{max-width:2em}.item-description{margin-left:1em}.overflow-ellipsis{text-overflow:ellipsis;display:inline-block;max-width:100%;overflow:hidden}.modal-dialog{z-index:inherit}.panel-default .default{background-color:#f5f5f5}.loading-animation{position:relative;margin:30px auto 0}.loading-animation .circle{background-color:transparent;border:5px solid rgba(0,183,229,0.9);opacity:.9;border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow:0 0 35px #2187e7;width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite ease-in-out;animation:spinPulse 1s infinite ease-in-out}.loading-animation .circle1{background-color:transparent;border:5px solid rgba(0,183,229,0.9);opacity:.9;border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow:0 0 15px #2187e7;width:30px;height:30px;margin:0 auto;position:relative;top:-40px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;animation:spinoffPulse 1s infinite linear}@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg);transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #2187e7}50%{-moz-transform:rotate(145deg);transform:rotate(145deg);opacity:1}100%{-moz-transform:rotate(-320deg);transform:rotate(-320deg);opacity:0}}@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg);transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #2187e7}50%{-webkit-transform:rotate(145deg);transform:rotate(145deg);opacity:1}100%{-webkit-transform:rotate(-320deg);transform:rotate(-320deg);opacity:0}}@keyframes spinPulse{0%{-moz-transform:rotate(160deg);-ms-transform:rotate(160deg);-webkit-transform:rotate(160deg);transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #2187e7}50%{-moz-transform:rotate(145deg);-ms-transform:rotate(145deg);-webkit-transform:rotate(145deg);transform:rotate(145deg);opacity:1}100%{-moz-transform:rotate(-320deg);-ms-transform:rotate(-320deg);-webkit-transform:rotate(-320deg);transform:rotate(-320deg);opacity:0}}@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinoffPulse{0%{-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}} diff --git a/RIGS/static/scss/screen.scss b/RIGS/static/scss/screen.scss index 01f9a2e6..cbf01338 100644 --- a/RIGS/static/scss/screen.scss +++ b/RIGS/static/scss/screen.scss @@ -7,6 +7,9 @@ @import "jq-ui-bootstrap/_menu"; @import "jq-ui-bootstrap/_tooltip"; +@import "compass/css3/animation"; +@import "compass/css3/transform"; + body, .pad-top { padding-top: 50px; } @@ -71,3 +74,66 @@ textarea { background-color: $panel-default-heading-bg; } } + +.loading-animation { + position: relative; + margin: 30px auto 0; + + .circle { + background-color: rgba(0,0,0,0); + border: 5px solid rgba(0,183,229,0.9); + opacity: .9; + border-right: 5px solid rgba(0,0,0,0); + border-left: 5px solid rgba(0,0,0,0); + border-radius: 50px; + box-shadow: 0 0 35px #2187e7; + width: 50px; + height: 50px; + margin: 0 auto; + @include animation(spinPulse 1s infinite ease-in-out); + } + + .circle1 { + background-color: rgba(0,0,0,0); + border: 5px solid rgba(0,183,229,0.9); + opacity: .9; + border-left: 5px solid rgba(0,0,0,0); + border-right: 5px solid rgba(0,0,0,0); + border-radius: 50px; + box-shadow: 0 0 15px #2187e7; + width: 30px; + height: 30px; + margin: 0 auto; + position: relative; + top: -40px; + @include animation(spinoffPulse 1s infinite linear); + } + + @include keyframes(spinPulse) { + 0% { + @include rotate(160deg); + opacity: 0; + box-shadow: 0 0 1px #2187e7; + } + + 50% { + @include rotate(145deg); + opacity: 1; + } + + 100% { + @include rotate(-320deg); + opacity: 0; + }; + } + + @include keyframes(spinoffPulse) { + 0% { + @include rotate(0deg); + } + + 100% { + @include rotate(360deg); + }; + } +} diff --git a/RIGS/templates/RIGS/activity_feed.html b/RIGS/templates/RIGS/activity_feed.html index 32060987..f41350b8 100644 --- a/RIGS/templates/RIGS/activity_feed.html +++ b/RIGS/templates/RIGS/activity_feed.html @@ -48,7 +48,12 @@