diff --git a/conference.js b/conference.js
index f578f4794..0ca477784 100644
--- a/conference.js
+++ b/conference.js
@@ -1,8 +1,8 @@
/* global $, APP, JitsiMeetJS, config, interfaceConfig */
import {openConnection} from './connection';
-//FIXME:
-import createRoomLocker from './modules/UI/authentication/RoomLocker';
-//FIXME:
+import Invite from './modules/UI/invite/Invite';
+import ContactList from './modules/UI/side_pannels/contactlist/ContactList';
+
import AuthHandler from './modules/UI/authentication/AuthHandler';
import ConnectionQuality from './modules/connectionquality/connectionquality';
@@ -26,7 +26,7 @@ const ConferenceErrors = JitsiMeetJS.errors.conference;
const TrackEvents = JitsiMeetJS.events.track;
const TrackErrors = JitsiMeetJS.errors.track;
-let room, connection, localAudio, localVideo, roomLocker;
+let room, connection, localAudio, localVideo;
/**
* Indicates whether the connection is interrupted or not.
@@ -363,18 +363,7 @@ class ConferenceConnector {
switch (err) {
// room is locked by the password
case ConferenceErrors.PASSWORD_REQUIRED:
- APP.UI.markRoomLocked(true);
- roomLocker.requirePassword().then(function () {
- let pass = roomLocker.password;
- // we received that password is required, but user is trying
- // anyway to login without a password, mark room as not locked
- // in case he succeeds (maybe someone removed the password
- // meanwhile), if it is still locked another password required
- // will be received and the room again will be marked as locked
- if (!pass)
- APP.UI.markRoomLocked(false);
- room.join(roomLocker.password);
- });
+ APP.UI.emitEvent(UIEvents.PASSWORD_REQUIRED);
break;
case ConferenceErrors.CONNECTION_ERROR:
@@ -403,8 +392,7 @@ class ConferenceConnector {
}, 5000);
// notify user that auth is required
-
- AuthHandler.requireAuth(room, roomLocker.password);
+ AuthHandler.requireAuth(room, this.invite.getRoomLocker().password);
break;
case ConferenceErrors.RESERVATION_ERROR:
@@ -576,6 +564,8 @@ export default {
this.isDesktopSharingEnabled =
JitsiMeetJS.isDesktopSharingEnabled();
+ APP.UI.ContactList = new ContactList(room);
+
// if user didn't give access to mic or camera or doesn't have
// them at all, we disable corresponding toolbar buttons
if (!tracks.find((t) => t.isAudioTrack())) {
@@ -888,7 +878,7 @@ export default {
room = connection.initJitsiConference(APP.conference.roomName,
this._getConferenceOptions());
this._setLocalAudioVideoStreams(localTracks);
- roomLocker = createRoomLocker(room);
+ this.invite = new Invite(room);
this._room = room; // FIXME do not use this
let email = APP.settings.getEmail();
@@ -1316,13 +1306,6 @@ export default {
APP.UI.updateRecordingState(status);
});
- room.on(ConferenceEvents.LOCK_STATE_CHANGED, (state, error) => {
- console.log("Received channel password lock change: ", state,
- error);
- APP.UI.markRoomLocked(state);
- roomLocker.lockedElsewhere = state;
- });
-
room.on(ConferenceEvents.USER_STATUS_CHANGED, function (id, status) {
APP.UI.updateUserStatus(id, status);
});
@@ -1348,19 +1331,6 @@ export default {
"resizable,scrollbars=yes,status=1");
});
- APP.UI.addListener(UIEvents.ROOM_LOCK_CLICKED, () => {
- if (room.isModerator()) {
- let promise = roomLocker.isLocked
- ? roomLocker.askToUnlock()
- : roomLocker.askToLock();
- promise.then(() => {
- APP.UI.markRoomLocked(roomLocker.isLocked);
- });
- } else {
- roomLocker.notifyModeratorRequired();
- }
- });
-
APP.UI.addListener(UIEvents.AUDIO_MUTED, muteLocalAudio);
APP.UI.addListener(UIEvents.VIDEO_MUTED, muteLocalVideo);
diff --git a/css/_animations.scss b/css/_animations.scss
new file mode 100644
index 000000000..1fcb06757
--- /dev/null
+++ b/css/_animations.scss
@@ -0,0 +1,84 @@
+/**
+* Project animations
+**/
+
+/**
+ * START of slide in animation for extended toolbar.
+ */
+@include keyframes(slideInX) {
+ 0% { transform: translateX(-100%); }
+ 100% { transform: translateX(0%); }
+}
+
+@include keyframes(slideOutX) {
+ 0% { transform: translateX(0%); }
+ 100% { transform: translateX(-100%); }
+}
+
+@include keyframes(slideInExtX) {
+ 0% { transform: translateX(-500%); }
+ 100% { transform: translateX(0%); }
+}
+
+@include keyframes(slideOutExtX) {
+ 0% { transform: translateX(0%); }
+ 100% { transform: translateX(-500%); }
+}
+
+/**
+ * END of slide out animation for extended toolbar.
+ */
+
+/**
+ * START of slide in / out animation for main toolbar.
+ */
+@include keyframes(slideInY) {
+ 100% { transform: translateY(0%); }
+}
+
+@include keyframes(slideOutY) {
+ 0% { transform: translateY(0%); }
+ 100% { transform: translateY(-100%); }
+}
+
+/**
+ * END of slide in / out animation for main toolbar.
+ */
+
+/**
+ * START of slide in animation for extended toolbar (inner) panel.
+ */
+
+// FIX: Can't use percentage because of breaking animation when width is changed
+// (100% of 0 is also zero) Extracted this to config variable.
+@include keyframes(slideInExt) {
+ from { left: -$sidebarWidth; }
+ to { left: 0; }
+}
+
+@include keyframes(slideOutExt) {
+ from { left: 0; }
+ to { left: -$sidebarWidth; }
+}
+
+/**
+ * END of slide in animation for extended toolbar (inner) panel.
+ */
+
+/**
+* START of slide in animation for extended toolbar container
+**/
+
+@include keyframes(slideOutExtContainer) {
+ from { width: $sidebarWidth; }
+ to { width: 0; }
+}
+
+@include keyframes(slideInExtContainer) {
+ from { width: 0; }
+ to { width: $sidebarWidth; }
+}
+
+/**
+* END of slide in animation for extended toolbar container
+**/
\ No newline at end of file
diff --git a/css/_base.scss b/css/_base.scss
index 497f49fd0..5799760db 100644
--- a/css/_base.scss
+++ b/css/_base.scss
@@ -13,6 +13,10 @@ html, body{
overflow: hidden;
}
+p {
+ margin: 0;
+}
+
html, body, input, textarea, keygen, select, button {
font-family: $baseFontFamily !important;
}
@@ -26,16 +30,17 @@ html, body, input, textarea, keygen, select, button {
}
input[type='text'], input[type='password'], textarea {
- -webkit-user-select: text;
- user-select: text;
display: inline-block;
- padding: 5px;
- color: $defaultDarkColor;
+ width: 100%;
+ padding: 5px 7px;
+ color: $inputColor;
border-radius: $borderRadius;
line-height: 32px;
+ letter-spacing: $letterSpacing;
height: 32px;
text-align: left;
border:1px solid $inputBorderColor;
+ background-color: $inputBackground;
outline: none; /* removes the default outline */
resize: none; /* prevents the user-resizing, adjust to taste */
}
@@ -43,7 +48,8 @@ input[type='text'], input[type='password'], textarea {
textarea {
overflow: hidden;
word-wrap: break-word;
- resize: horizontal;
+ resize: none;
+ line-height: 1.5em;
}
button.no-icon {
@@ -53,12 +59,9 @@ button.no-icon {
button, input, select, textarea {
margin: 0;
vertical-align: baseline;
- color: $defaultDarkColor;
- background: $inputLightBackground;
- font-size: 12px;
- border: none;
- box-shadow: none;
- outline: none;
+ color: $inputColor;
+ font-size: 1em;
+ letter-spacing: $letterSpacing;
}
button, select, input[type="button"],
@@ -72,7 +75,7 @@ input[type="reset"], input[type="submit"] {
button {
color: #FFF;
- background-color: $buttonBackground !important;
+ background-color: $buttonBackground;
border-radius: $borderRadius;
}
@@ -159,6 +162,9 @@ form {
display: flex !important;
}
+/**
+* Tooltips
+**/
.tipsy {
z-index: $tooltipsZ;
&-inner {
@@ -169,3 +175,26 @@ form {
border-color: $tooltipBg;
}
}
+
+/**
+* Dialogs fade
+*/
+.aui-blanket {
+ visibility: visible;
+}
+
+.link {
+ color: $linkFontColor;
+ @include transition(color .1s ease-out);
+
+ &:hover {
+ color: $linkHoverFontColor;
+ text-decoration: underline;
+ @include transition(color .1s ease-in);
+ }
+}
+
+#inviteLinkRef {
+ -webkit-user-select: text;
+ user-select: text;
+}
\ No newline at end of file
diff --git a/css/_contact_list.scss b/css/_contact_list.scss
index 64f763151..afcc7d7d9 100644
--- a/css/_contact_list.scss
+++ b/css/_contact_list.scss
@@ -4,7 +4,8 @@
> ul#contacts {
font-size: 12px;
bottom: 0px;
- margin: 0px;
+ margin: 0;
+ margin-top: 16px;
padding: 0px;
width: 100%;
overflow: auto;
@@ -24,7 +25,7 @@
white-space: nowrap;
color: #FFF;
font-size: 10pt;
- padding: 6px 10%;
+ padding: 6px 30px;
&:hover,
&:active {
diff --git a/css/_functions.scss b/css/_functions.scss
new file mode 100644
index 000000000..8075204f6
--- /dev/null
+++ b/css/_functions.scss
@@ -0,0 +1,6 @@
+/* Functions */
+
+/* Pixels to Ems function */
+@function em($value, $base: 16) {
+ @return #{$value / $base}em;
+}
\ No newline at end of file
diff --git a/css/_mixins.scss b/css/_mixins.scss
index 1ff283e51..fd63d81e9 100644
--- a/css/_mixins.scss
+++ b/css/_mixins.scss
@@ -18,6 +18,14 @@
animation: $animations;
}
+@mixin flex() {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+}
+
/**
* Keyframes mixin.
*/
@@ -63,3 +71,9 @@
-webkit-transition: $transition;
transition: $transition;
}
+
+@mixin box-shadow($type, $h, $y, $blur, $color) {
+ -webkit-box-shadow: $type $h $y $blur $color;
+ -moz-box-shadow: $type $h $y $blur $color;
+ box-shadow: $type $h $y $blur $color;
+}
\ No newline at end of file
diff --git a/css/_modaldialog.scss b/css/_modaldialog.scss
index d3025aa6b..2ffadc4c7 100644
--- a/css/_modaldialog.scss
+++ b/css/_modaldialog.scss
@@ -19,11 +19,6 @@
width: 100%;
}
-.jqibuttons button {
- margin-right: 5px;
- float:right;
-}
-
button.jqidefaultbutton #inviteLinkRef {
color: #2c8ad2;
}
diff --git a/css/_side_toolbar_container.scss b/css/_side_toolbar_container.scss
index 0cbf02f85..4c9219bec 100644
--- a/css/_side_toolbar_container.scss
+++ b/css/_side_toolbar_container.scss
@@ -6,13 +6,13 @@
position:absolute;
top: 0px;
left: $defaultToolbarSize;
- width: 0%;
- height: 100%;
- max-width: 200px;
+ width: 0;
background-color: rgba(0,0,0,0.8);
+ height: 100%;
+ max-width: $sidebarWidth;
z-index: 800;
overflow: hidden;
- letter-spacing: 1px;
+ letter-spacing: $titleLetterSpacing;
/**
* Labels inside the side panel.
@@ -24,7 +24,8 @@
/**
* Form elements and blocks.
*/
- input, label, select, button, a, .sideToolbarBlock {
+ input, label, select, a,
+ .sideToolbarBlock, .input-control, .button-control {
display: inline-block;
margin-top: 15px;
margin-left: 10%;
@@ -36,7 +37,7 @@
*/
select, input[type="button"], input[type="text"],
input[type="reset"], input[type="submit"] {
- color: $defaultColor;
+ color: $inputColor;
background: $inputBackground;
border: none;
}
@@ -63,7 +64,10 @@
*/
.sideToolbarContainer__inner {
display: none;
- width: 200px;
+ height: 100%;
+ width: $sidebarWidth;
+ position: absolute;
+ box-sizing: border-box;
color: #FFF;
/**
@@ -100,6 +104,14 @@
.first {
margin-top: 0px !important;
}
+
+ /**
+ * Buttons in the side toolbar container.
+ */
+ .button-control {
+ margin: 9px 0;
+ width: 100%;
+ }
}
}
diff --git a/css/_toolbars.scss b/css/_toolbars.scss
index 6bb1c7091..22fbea927 100644
--- a/css/_toolbars.scss
+++ b/css/_toolbars.scss
@@ -45,13 +45,13 @@
border-radius: 3px;
.first {
- border-bottom-left-radius: 4px;
- border-top-left-radius: 4px;
+ border-bottom-left-radius: 3px;
+ border-top-left-radius: 3px;
}
.last {
- border-bottom-right-radius: 4px;
- border-top-right-radius: 4px;
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px;
}
}
diff --git a/css/_variables.scss b/css/_variables.scss
index 77209ef11..df3bbe913 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -1,3 +1,8 @@
+/**
+* Theme
+*/
+@import 'themes/light';
+
/**
* Style variables
*/
@@ -21,7 +26,8 @@ $thumbnailToolbarHeight: 25px;
*/
$defaultColor: #F1F1F1;
$defaultSideBarFontColor: #44A5FF;
-$defaultDarkColor: #4F4F4F;
+$defaultSemiDarkColor: #ACACAC;
+$defaultDarkColor: #2b3d5c;
$defaultBackground: #474747;
$tooltipBg: rgba(0,0,0, 0.7);
@@ -33,11 +39,8 @@ $toolbarBadgeColor: #FFFFFF;
$toolbarToggleBackground: #12499C;
// Main controls
-$inputBackground: rgba(132, 132, 132, .5);
$inputSemiBackground: rgba(132, 132, 132, .8);
$inputLightBackground: #EBEBEB;
-$inputBorderColor: #EBEBEB;
-$buttonBackground: #44A5FF;
// Video layout.
$videoThumbnailHovered: #BFEBFF;
@@ -58,10 +61,25 @@ $rateStarLabelColor: #333;
*/
$borderRadius: 4px;
$defaultWatermarkLink: '../images/watermark.png';
+$sidebarWidth: 200px;
/**
* Z-indexes. TODO: Replace this by a function.
*/
$tooltipsZ: 901;
$toolbarZ: 900;
-$overlayZ: 800;
\ No newline at end of file
+$overlayZ: 800;
+
+/**
+ * Font Colors TODO: Change colors when general dialogs are implemented.
+ */
+$defaultFontColor: #777;
+$defaultLightFontColor: #F1F1F1;
+$defaultDarkFontColor: #000;
+$buttonFontColor: #777;
+$buttonHoverFontColor: #287ade;
+$auiPrimaryButtonBg: #3572b0;
+$auiPrimaryButtonHoverBg: #57647b;
+$auiPrimaryButtonColor: #fff;
+$auiIconColor: #707070;
+$inputControlEmColor: #f29424;
\ No newline at end of file
diff --git a/css/buttons/_button-control.scss b/css/buttons/_button-control.scss
new file mode 100644
index 000000000..98da4fd98
--- /dev/null
+++ b/css/buttons/_button-control.scss
@@ -0,0 +1,81 @@
+.button-control {
+ box-sizing: border-box;
+ display: inline-block;
+ border: 1px solid $buttonBorder;
+ vertical-align: baseline;
+ height: 30px;
+ padding: 4px 10px;
+ margin: 0;
+ line-height: 1.5em;
+ outline: none;
+ background-color: transparent;
+ float: right;
+ font-size: 14px;
+ margin-left: 10px;
+ color: $buttonColor;
+ letter-spacing: $letterSpacing;
+ font-weight: $buttonFontWeight;
+ @include transition(background-color .1s ease-out);
+
+ &[disabled] {
+ color: #666;
+ cursor: default;
+ }
+
+ &_full-width {
+ margin: 0;
+ width: 100%;
+ }
+
+ &:hover {
+ border: 1px solid $buttonHoverBorder;
+ background-color: $buttonHoverBackground;
+ @include transition(background-color .1s ease-in);
+ }
+
+ &:active {
+ @include box-shadow(inset, 0, 0, 1px, $buttonShadowColor);
+ }
+
+ &_light {
+ color: $defaultDarkColor;
+ background-color: $buttonLightBackground;
+ border: 1px solid $buttonLightBorder;
+
+ &:hover {
+ border: 1px solid $buttonLightHoverBorder;
+ background-color: $buttonLightHoverBackground;
+ }
+ }
+
+ &_link {
+ color: $buttonLinkColor;
+ background-color: $buttonLinkBackground;
+
+ &:hover {
+ background-color: $buttonLinkBackground;
+ }
+ }
+
+ &_primary {
+ background-color: $primaryButtonBackground;
+ border: 1px solid $primaryButtonBackground;
+ color: $primaryButtonColor;
+ font-weight: $primaryButtonFontWeight;
+
+ &:hover {
+ border: 1px solid $primaryButtonHoverBackground;
+ background-color: $primaryButtonHoverBackground;
+ }
+ }
+
+ &_close {
+ color: $defaultFontColor;
+ }
+ &_submit {
+ color: $linkFontColor;
+ &:hover {
+ color: $linkHoverFontColor;
+ }
+ }
+}
\ No newline at end of file
diff --git a/css/input-control/_input-control.scss b/css/input-control/_input-control.scss
new file mode 100644
index 000000000..5f499e168
--- /dev/null
+++ b/css/input-control/_input-control.scss
@@ -0,0 +1,49 @@
+.input-control {
+ padding: 16px 0;
+
+ &__text {
+ margin: 8px 0;
+ font-size: 1em
+ }
+
+ &__label {
+ font-size: 1em;
+ font-weight: $labelFontWeight;
+ }
+
+ &__input {
+ margin: 8px 0;
+
+ &::selection {
+ background-color: $defaultDarkSelectionColor;
+ }
+ }
+
+ &__em {
+ color: $inputControlEmColor;
+ }
+
+ &__hint {
+ margin-top: 0;
+ font-size: $hintFontSize;
+
+ span {
+ vertical-align: middle;
+ }
+ }
+
+ &__container {
+ position: relative;
+ width: 100%;
+ @include flex();
+
+ .button-control {
+ margin: 9px 0 9px 10px;
+ }
+ }
+
+ &__right {
+ position: absolute;
+ right: 0;
+ }
+}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index d1b1e9227..73ef87203 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,3 +1,9 @@
+/* Functions BEGIN */
+
+@import 'functions';
+
+/* Functions END */
+
/* Variables BEGIN */
@import 'variables';
@@ -10,6 +16,12 @@
/* Mixins END */
+/* Animations BEGIN */
+
+@import "animations";
+
+/* Animations END */
+
/* Fonts BEGIN */
@import 'font';
@@ -17,6 +29,10 @@
/* Fonts END */
+/* Theme BEGIN */
+@import "themes/light";
+/* Theme END */
+
/* Modules BEGIN */
@import 'toastr';
@@ -25,8 +41,6 @@
@import 'modals/dialog';
@import 'modals/feedback/feedback';
@import 'videolayout_default';
-@import 'jquery-impromptu';
-@import 'modaldialog';
@import 'notice';
@import 'popup_menu';
@import 'recording';
@@ -43,6 +57,8 @@
@import 'jquery.contextMenu';
@import 'keyboard-shortcuts';
@import 'redirect_page';
-
+@import 'input-control/input-control';
+@import 'shortcuts/main';
+@import 'buttons/button-control';
/* Modules END */
\ No newline at end of file
diff --git a/css/modals/_dialog.scss b/css/modals/_dialog.scss
index 028fa24c7..6a8832f51 100644
--- a/css/modals/_dialog.scss
+++ b/css/modals/_dialog.scss
@@ -1,53 +1,80 @@
-.dialog{
+.dialog {
visibility: visible;
height: auto;
- p {
- color: $defaultDarkColor;
+ h3 {
+ color: $auiDialogColor;
}
- textarea {
- background: none;
- border: 1px solid $inputBorderColor;
- }
- .aui-dialog2-content:last-child {
- border-bottom-right-radius: 5px;
- border-bottom-left-radius: 5px;
- }
- .aui-dialog2-content:first-child {
- border-top-right-radius: 5px;
- border-top-left-radius: 5px;
- }
- .aui-dialog2-footer{
- border-top: 0;
- border-radius: 0;
- padding-top: 0;
- background: none;
- border: none;
- height: auto;
- margin-top: 10px;
- }
- .aui-button {
- height: 28px;
- font-size: 12px;
- padding: 3px 6px 3px 6px;
- border: none;
- box-shadow: none;
- outline: none;
- &_close {
- font-weight: 400 !important;
- color: $buttonBackground;
- background: none !important;
+ .aui {
- :hover {
- text-decoration: underline;
+ &-icon {
+ color: $auiDialogColor;
+
+ &-small {
+ width: 14px;
+ height: 14px;
}
}
- &_submit {
- font-weight: 700 !important;
- color: $defaultColor;
- background: $buttonBackground;
- border-radius: 3px;
+
+ &-iconfont-close-dialog {
+ cursor: pointer;
+ right: 20px;
+ position: absolute;
+ top: -49px;
+ }
+
+ &-dialog2 {
+ &-header, &-footer {
+ background-color: $auiDialogBg;
+ border: none;
+ }
+
+ &-header {
+ height: em(58, 12);
+ border-bottom: 1px solid $auiBorderColor;
+
+ h2 {
+ font-size: em(20, 12);
+ font-weight: $dialogTitleFontWeight;
+ letter-spacing: $titleLetterSpacing;
+ color: $auiDialogColor;
+ }
+
+ &-main {
+ padding-right: 0;
+ }
+ }
+
+ &-footer {
+ border-top: 1px solid $auiBorderColor;
+ }
+
+ &-content {
+ font-size: em(14, 12);
+ min-height: 0;
+ background-color: $auiDialogContentBg;
+ color: $auiDialogColor;
+
+ p,span, h3 {
+ font-weight: $labelFontWeight;
+ letter-spacing: $letterSpacing;
+ }
+
+ &:last-child {
+ border-bottom-right-radius: 5px;
+ border-bottom-left-radius: 5px;
+ }
+
+ &:first-child {
+ border-top-right-radius: 5px;
+ border-top-left-radius: 5px;
+ }
+ }
}
}
-}
\ No newline at end of file
+
+ .input-control:not(:last-child) {
+ border-bottom: 1px solid $auiBorderColor;
+ }
+}
diff --git a/css/modals/feedback/_feedback.scss b/css/modals/feedback/_feedback.scss
index 7de96adeb..4fcc12346 100644
--- a/css/modals/feedback/_feedback.scss
+++ b/css/modals/feedback/_feedback.scss
@@ -45,64 +45,60 @@
animation-timing-function: ease-in-out
}
-.feedback {
- h2 {
- font-weight: 400;
- font-size: 24px;
- line-height: 1.2;
- }
- p {
- font-weight: 400;
- font-size: 14px;
- }
-
- &__content {
- text-align: center;
-
- textarea {
- text-align: left;
- min-height: 80px;
- width: 100%;
- }
- }
- &__footer {
-
- &:hover {
- color: #287ade;
- outline: 0;
- }
- }
- &__rating {
- line-height: 1.2;
- padding: 20px 0;
-
- p {
- margin: 10px 0 0;
+.feedback.aui-dialog2{
+ .aui-dialog2{
+ &-header {
+ background-color: $auiDialogContentBg;
+ border-bottom-color: transparent;
+ padding-top: 30px;
+ h2 {
+ text-align: center;
+ }
}
- .star-label {
- font-size: 16px;
- color: $rateStarLabelColor;
- }
+ &-content {
+ text-align: center;
+ padding: 10px 40px 20px 40px;
- .star-btn {
- color: $rateStarDefault;
- font-size: 36px;
- position: relative;
- cursor: pointer;
- outline: none;
- text-decoration: none;
- @include transition(all .2s ease);
+ .rating {
+ line-height: 1.2;
+ text-align: center;
+ margin-top: 10px;
- &.starHover,
- &.active,
- &:hover {
- color: $rateStarActivity;
- > i:before {
- content: "\e90a";
+ .star-label {
+ height: 16px;
+ font-size: 14px;
}
- };
+ .star-btn {
+ color: $rateStarDefault;
+ font-size: 36px;
+ position: relative;
+ cursor: pointer;
+ outline: none;
+ text-decoration: none;
+ @include transition(all .2s ease);
+ &.starHover,
+ &.active,
+ &:hover {
+ color: $rateStarActivity;
+ };
+
+ }
+ }
+
+ .details {
+ padding-left: 60px;
+ padding-right: 60px;
+ margin-top: 20px;
+ textarea {
+ min-height: 100px;
+ }
+ }
+ }
+ &-footer {
+ background-color: $auiDialogContentBg;
+ border-top-color: transparent;
}
}
-}
+}
\ No newline at end of file
diff --git a/css/shortcuts/_main.scss b/css/shortcuts/_main.scss
new file mode 100644
index 000000000..065785b30
--- /dev/null
+++ b/css/shortcuts/_main.scss
@@ -0,0 +1,4 @@
+/* Import shortcuts blocks */
+
+@import 'regular-key';
+@import 'shortcuts-list';
\ No newline at end of file
diff --git a/css/shortcuts/_regular-key.scss b/css/shortcuts/_regular-key.scss
new file mode 100644
index 000000000..9215e372c
--- /dev/null
+++ b/css/shortcuts/_regular-key.scss
@@ -0,0 +1,11 @@
+.regular-key {
+ display: table-cell;
+ width: 25px;
+ height: 20px;
+ padding: 0;
+ text-align: center;
+ vertical-align: middle;
+ font-family: $baseFontFamily;
+ color: $defaultDarkColor;
+ font-size: 12px;
+}
\ No newline at end of file
diff --git a/css/shortcuts/_shortcuts-list.scss b/css/shortcuts/_shortcuts-list.scss
new file mode 100644
index 000000000..7e32ed4e2
--- /dev/null
+++ b/css/shortcuts/_shortcuts-list.scss
@@ -0,0 +1,12 @@
+.shortcuts-list {
+ padding: 0;
+
+ &__description {
+ margin-left: em(16, 14);
+ vertical-align: top;
+ }
+
+ &__item {
+ margin-bottom: em(7, 14);
+ }
+}
\ No newline at end of file
diff --git a/css/themes/_light.scss b/css/themes/_light.scss
new file mode 100644
index 000000000..672018aca
--- /dev/null
+++ b/css/themes/_light.scss
@@ -0,0 +1,46 @@
+/**
+* Buttons
+*/
+$buttonBackground: #f5f5f5;
+$buttonHoverBackground: #e9e9e9;
+$buttonBorder: #ccc;
+$buttonHoverBorder: #999;
+$buttonColor: #333;
+
+$buttonLightBackground: #f5f5f5;
+$buttonLightHoverBackground: #e9e9e9;
+$buttonLightBorder: #ccc;
+$buttonLightHoverBorder: #999;
+
+$buttonLinkBackground: transparent;
+$buttonLinkColor: #0090e8;
+
+$primaryButtonBackground: #3572b0;
+$primaryButtonHoverBackground: #2a67a5;
+$primaryButtonColor: #fff;
+$primaryButtonFontWeight: 400;
+
+$buttonShadowColor: #192d4f;
+
+/**
+ * Dialog colors
+ **/
+$auiDialogColor: #333;
+$auiDialogBg: #f5f5f5;
+$auiDialogContentBg: #fff;
+$auiBorderColor: #ccc;
+$dialogTitleFontWeight: 400;
+
+// Main controls
+$inputBackground: #fff;
+$inputBorderColor: #ccc;
+$inputColor: #333;
+$defaultDarkSelectionColor: #ccc;
+$titleLetterSpacing: 0;
+$letterSpacing: 0;
+$buttonFontWeight: 400;
+$labelFontWeight: 400;
+$hintFontSize: em(13, 14);
+$linkFontColor: #3572b0;
+$linkHoverFontColor: darken(#3572b0, 10%);
+$dropdownColor: #333;
\ No newline at end of file
diff --git a/index.html b/index.html
index 66e070f9d..b7c6bc1f8 100644
--- a/index.html
+++ b/index.html
@@ -132,7 +132,6 @@
-