pimhwang
/
spreed-webrtc
mirror of https://github.com/strukturag/spreed-webrtc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Rearange overlaybar styles to scss. 

Add .bar class. Change all bar-* classes. Revert to font property instead of rhythm mixin.
pull/30/head
Evan Theurer 12 years ago
parent
b827e13d61
commit
8727a45d04
7 changed files with 112 additions and 99 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      html/main.html
  2. 24
      src/styles/components/_bar.scss
  3. 4
      src/styles/global/_base.scss
  4. 25
      src/styles/global/_mixins.scss
  5. 131
      src/styles/global/_overlaybar.scss
  6. 3
      src/styles/main.scss
  7. 2
      static/partials/statusmessage.html

22
html/main.html
Unescape View File

@ -8,16 +8,18 @@
<div id="loader"><div><i class="fa fa-spinner fa-spin"></i></div></div> <div id="loader"><div><i class="fa fa-spinner fa-spin"></i></div></div>
<page></page> <page></page>
<div id="bar"> <div id="bar">
<div class="bar-left"> <div class="bar">
<%template "logo" .%> <div class="left">
</div> <%template "logo" .%>
<status-message></status-message> </div>
<div class="ng-cloak bar-right"> <status-message></status-message>
<button title="{{_('Share your screen')}}" class="btn aenablebtn" ng-show="isChrome && webrtcDetectedVersion >= 32 && (status=='connected' || status=='conference' || layout.screenshare)" ng-model="layout.screenshare" btn-checkbox><i class="fa fa-desktop"></i></button> <div class="ng-cloak right">
<button title="{{_('Chat')}}" ng-show="roomstatus" class="btn" ng-class="{messagesunseen: chatMessagesUnseen>0}" ng-model="layout.chat" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-comments-o"></i><span class="badge" ng-show="chatMessagesUnseen">{{chatMessagesUnseen}}</span></button> <button title="{{_('Share your screen')}}" class="btn aenablebtn" ng-show="isChrome && webrtcDetectedVersion >= 32 && (status=='connected' || status=='conference' || layout.screenshare)" ng-model="layout.screenshare" btn-checkbox><i class="fa fa-desktop"></i></button>
<button title="{{_('Mute microphone')}}" class="btn amutebtn" ng-model="microphoneMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-microphone-slash"></i></button> <button title="{{_('Chat')}}" ng-show="roomstatus" class="btn" ng-class="{messagesunseen: chatMessagesUnseen>0}" ng-model="layout.chat" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-comments-o"></i><span class="badge" ng-show="chatMessagesUnseen">{{chatMessagesUnseen}}</span></button>
<button title="{{_('Turn camera off')}}" class="btn amutebtn" ng-model="cameraMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-eye-slash"></i></button> <button title="{{_('Mute microphone')}}" class="btn amutebtn" ng-model="microphoneMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-microphone-slash"></i></button>
<button title="{{_('Settings')}}" class="btn" ng-model="layout.settings" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-cog"></i></button> <button title="{{_('Turn camera off')}}" class="btn amutebtn" ng-model="cameraMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-eye-slash"></i></button>
<button title="{{_('Settings')}}" class="btn" ng-model="layout.settings" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-cog"></i></button>
</div>
</div> </div>
</div> </div>
<div id="roombar" class="ng-cloak"> <div id="roombar" class="ng-cloak">

24
src/styles/components/_bar.scss
Unescape View File

@ -20,16 +20,20 @@
*/ */
#bar { #bar {
background-color: $componentbg;
color: $componentfg1;
left: 0; left: 0;
min-height: 44px; min-height: 44px;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
text-align: center;
z-index: 5; z-index: 5;
@include adjust-leading-to(2); }
.bar {
background-color: $componentbg;
color: $componentfg1;
font: bold 1em/40px $font-sans-serif;
text-align: center;
// @include adjust-leading-to(2);
@include box-shadow(0 2px 10px 0 $componentfg3); @include box-shadow(0 2px 10px 0 $componentfg3);
// @include debug-vertical-alignment(); // @include debug-vertical-alignment();
@include touch-callout(none); @include touch-callout(none);
@ -43,7 +47,7 @@
} }
} }
.bar-left { .bar .left {
bottom: 0; bottom: 0;
left: 0; left: 0;
top: 0; top: 0;
@ -55,10 +59,11 @@
display: inline-block; display: inline-block;
color: black; color: black;
height: 32px; height: 32px;
font: normal 11px/11px $font-sans-serif;
text-align: left; text-align: left;
width: 90px; width: 90px;
vertical-align: middle; vertical-align: middle;
@include adjust-font-size-to(11px,0.4); // @include adjust-font-size-to(11px,0.4);
span { span {
font-style: italic; font-style: italic;
left: 38px; left: 38px;
@ -71,7 +76,7 @@
} }
} }
.bar-middle { .bar .middle {
background-color: $componentbg; background-color: $componentbg;
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
@ -133,7 +138,7 @@
} }
} }
.bar-right { .bar .right {
bottom: 1px; bottom: 1px;
padding-right: 8px; padding-right: 8px;
position: absolute; position: absolute;
@ -153,11 +158,12 @@
color: $grey3; color: $grey3;
display: inline-block; display: inline-block;
height: 42px; height: 42px;
font: 24px/40px $font-sans-serif;
margin-left: -4px; margin-left: -4px;
padding: 0; padding: 0;
text-align: center; text-align: center;
width: 42px; width: 42px;
@include adjust-font-size-to(24px); // @include adjust-font-size-to(24px);
&:focus { &:focus {
border: none; border: none;
outline: none; outline: none;

4
src/styles/global/_base.scss
Unescape View File

@ -19,14 +19,14 @@
* *
*/ */
@include establish-baseline(); // @include establish-baseline();
html, html,
body { body {
background-clip: padding-box; background-clip: padding-box;
background-color: $background; background-color: $background;
height: 100%; height: 100%;
font: normal #{$base-font-size}/#{$base-rhythm-unit} $font-sans-serif; font: normal $base-font-size $font-sans-serif;
// @include debug-vertical-alignment(); // @include debug-vertical-alignment();
} }

25
src/styles/global/_mixins.scss
Unescape View File

@ -31,12 +31,27 @@
@mixin transition-duration($duration) { @mixin transition-duration($duration) {
transition-duration: $duration; transition-duration: $duration;
-webkit-transition-duration: $duration; -webkit-transition-duration: $duration;
} }
@mixin transition($transition) { @mixin transition($transition) {
transition: all linear 0.5s; transition: $transition;
-moz-transition: all linear 0.5s; -moz-transition: $transition;
-o-transition: all linear 0.5s; -o-transition: $transition;
-webkit-transition: all linear 0.5s; -webkit-transition: $transition;
}
@mixin border-radius($radius) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
@mixin linear-gradient($gradient...) {
background: #9dd53a; /* Old browsers */
background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
background: -o-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
} }

131
src/styles/global/_overlaybar.scss
Unescape View File

@ -28,83 +28,74 @@
text-shadow: 0 0 5px black; text-shadow: 0 0 5px black;
vertical-align: middle; vertical-align: middle;
@include user-select(none); @include user-select(none);
input[type="radio"], &:hover {
background: $componentfg2;
}
&.notvisible {
background: transparent;
pointer-events: none;
&:hover {
background: transparent;
}
}
.btn {
text-shadow: none;
}
.btn-link {
text-shadow: 0 0 5px black;
}
.form-group > * {
float: left;
padding-top: 0;
}
input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
margin-top: 2px; margin-top: 2px;
} }
label {
padding-top: 7px !important;
}
} }
.overlaybar:hover { .overlaybar {
background: $componentfg2; .overlaybarbutton {
} font-size: 20px;
vertical-align: middle;
.overlaybar.notvisible { position: absolute;
background: transparent; left: 3px;
pointer-events: none; top: 1px;
} padding: 6px;
.overlaybar.notvisible:hover { display: block;
background: transparent; color: $bordercolor;
} z-index: 15;
opacity: .7;
.overlaybar .btn { pointer-events: auto;
text-shadow: none; }
}
.overlaybar .btn-link {
text-shadow: 0 0 5px black;
}
.overlaybar .overlaybarbutton {
font-size: 20px;
vertical-align: middle;
position: absolute;
left: 3px;
top: 1px;
padding: 6px;
display: block;
color: $bordercolor;
z-index: 15;
opacity: .7;
pointer-events: auto;
}
.overlaybar .overlaybarcontent {
display: inline-block;
margin-left: .5em;
margin-bottom: 0;
max-width: 60%;
}
.overlaybarcontent > * {
padding-right: .5em;
}
.overlaybarcontent .input-group {
max-width: 160px;
}
.overlaybar label {
padding-top: 7px !important;
}
.overlaybar .overlaybaroverlay {
display: none;
opacity: .7;
text-align: left;
margin-left: .5em;
padding-top: 2px;
}
.overlaybar.notvisible {
.overlaybarcontent { .overlaybarcontent {
display: none; display: inline-block;
margin-left: .5em;
margin-bottom: 0;
max-width: 60%;
> * {
padding-right: .5em;
}
.input-group {
max-width: 160px;
}
} }
.overlaybaroverlay { .overlaybaroverlay {
display: block; display: none;
opacity: .7;
text-align: left;
margin-left: .5em;
padding-top: 2px;
}
&.notvisible {
.overlaybarcontent {
display: none;
}
.overlaybaroverlay {
display: block;
}
} }
}
.overlaybar .form-group > * {
float: left;
padding-top: 0;
} }

3
src/styles/main.scss
Unescape View File

@ -20,8 +20,7 @@
*/ */
@import "global/variables"; @import "global/variables";
@import "compass"; @import "compass/typography/vertical_rhythm";
@import "libs/libs"; @import "libs/libs";
@import "global/mixins"; @import "global/mixins";

2
static/partials/statusmessage.html
Unescape View File

@ -1,4 +1,4 @@
<span class="bar-middle status-{{status}}" ng-switch on="status"> <span class="middle status-{{status}}" ng-switch on="status">
<span ng-switch-when="initializing">{{_("Initializing")}} <i class="fa fa-spinner fa-spin"></i></span> <span ng-switch-when="initializing">{{_("Initializing")}} <i class="fa fa-spinner fa-spin"></i></span>
<span ng-switch-when="waiting"><span class="msg">{{_("Online")}} </span><i style="color:rgb(132,184,25)" class="fa fa-bullseye"></i> {{id|displayName}} <img class="userpicture" ng-show="master.buddyPicture" ng-src="{{master.buddyPicture}}" alt="" /></span> <span ng-switch-when="waiting"><span class="msg">{{_("Online")}} </span><i style="color:rgb(132,184,25)" class="fa fa-bullseye"></i> {{id|displayName}} <img class="userpicture" ng-show="master.buddyPicture" ng-src="{{master.buddyPicture}}" alt="" /></span>
<span ng-switch-when="connecting"><span class="msg">{{_("Calling")}} {{dialing|displayName}}</span> <a class="btn btn-small btn-danger" ng-click="doAbort()"><i class="fa fa-spinner fa-spin"></i> {{_("Hangup")}}</a></span> <span ng-switch-when="connecting"><span class="msg">{{_("Calling")}} {{dialing|displayName}}</span> <a class="btn btn-small btn-danger" ng-click="doAbort()"><i class="fa fa-spinner fa-spin"></i> {{_("Hangup")}}</a></span>

Write Preview
Loading…
Cancel
Save