diff --git a/gulpfile.js b/gulpfile.js index 464195c39d..c72a095899 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -17,7 +17,8 @@ const paths = { coverage: './coverage/', npmDir: './node_modules/', popupDir: './src/popup/', - cssDir: './src/popup/css/' + cssDir: './src/popup/css/', + cssDir2: './src/css/' }; const filters = { @@ -181,6 +182,8 @@ function safariZip(buildPath) { gulp.task('build', ['lint', 'webfonts']); +gulp.task('build2', ['webfonts2']); + gulp.task('webfonts', () => { return gulp.src('./webfonts.list') .pipe(googleWebFonts({ @@ -190,6 +193,15 @@ gulp.task('webfonts', () => { .pipe(gulp.dest(paths.cssDir)); }); +gulp.task('webfonts2', () => { + return gulp.src('./webfonts.list') + .pipe(googleWebFonts({ + fontsDir: 'webfonts', + cssFilename: 'webfonts.css' + })) + .pipe(gulp.dest(paths.cssDir2)); +}); + gulp.task('ci', ['ci:coverage']); gulp.task('ci:coverage', (cb) => { diff --git a/jslib b/jslib index f855a8272c..f673bd62d7 160000 --- a/jslib +++ b/jslib @@ -1 +1 @@ -Subproject commit f855a8272c7dc3c3099643cf34e49d3089e6575e +Subproject commit f673bd62d7abb773fa5a6abfb5307b7c3feca59b diff --git a/package.json b/package.json index a1799bcf7b..cdf4ad4fe5 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,8 @@ "start:firefox": "web-ext run --source-dir ./dist/", "dev": "gulp build && webpack --config webpack.dev.js", "dev:watch": "gulp build && webpack --config webpack.dev.js --watch", - "dev2": "webpack --config webpack2.js", - "dev2:watch": "webpack --config webpack2.js --watch", + "dev2": "gulp build2 && webpack --config webpack2.js", + "dev2:watch": "gulp build2 && webpack --config webpack2.js --watch", "prod": "gulp build && webpack --config webpack.prod.js", "dist": "npm run prod && gulp dist", "dist:firefox": "npm run prod && gulp dist:firefox", diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index d835cfb763..fba05c0e71 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -668,7 +668,22 @@ "message": "Enter the 6 digit verification code from your authenticator app." }, "enterVerificationCodeEmail": { - "message": "Enter the 6 digit verification code that was emailed to" + "message": "Enter the 6 digit verification code that was emailed to $EMAIL$.", + "placeholders": { + "email": { + "content": "$1", + "example": "example@gmail.com" + } + } + }, + "verificationCodeEmailSent": { + "message": "Verification email sent to $EMAIL$.", + "placeholders": { + "email": { + "content": "$1", + "example": "example@gmail.com" + } + } }, "rememberMe": { "message": "Remember me" diff --git a/src/popup2/accounts/environment.component.html b/src/popup2/accounts/environment.component.html index 648b4a53a3..004ae7adc5 100644 --- a/src/popup2/accounts/environment.component.html +++ b/src/popup2/accounts/environment.component.html @@ -1,59 +1,57 @@ -
-
-
-
-
-
- {{'selfHostedEnvironment' | i18n}} -
-
-
- - -
-
-
- {{'selfHostedEnvironmentFooter' | i18n}} -
-
-
-
- -
-
-
- - -
-
- - -
-
- - -
-
- - -
-
-
- {{'customEnvironmentFooter' | i18n}} -
-
+ +
+
+ {{'close' | i18n}} +
+
+ {{'appName' | i18n}} +
+
+ +
+
+
+
+ {{'selfHostedEnvironment' | i18n}} +
+
+
+ +
-
- - -
- +
+
+ {{'selfHostedEnvironmentFooter' | i18n}} +
-
+
+
+ {{'customEnvironment' | i18n}} +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ {{'customEnvironmentFooter' | i18n}} +
+
+ diff --git a/src/popup2/accounts/environment.component.ts b/src/popup2/accounts/environment.component.ts index 225ccb1492..23126d43f7 100644 --- a/src/popup2/accounts/environment.component.ts +++ b/src/popup2/accounts/environment.component.ts @@ -20,10 +20,11 @@ export class EnvironmentComponent extends BaseEnvironmentComponent { environmentService: EnvironmentService, i18nService: I18nService, private router: Router) { super(analytics, toasterService, environmentService, i18nService); + this.showCustom = true; } saved() { super.saved(); - this.router.navigate(['login']); + this.router.navigate(['']); } } diff --git a/src/popup2/accounts/hint.component.html b/src/popup2/accounts/hint.component.html index fa1c0c47f0..4a422e2ca5 100644 --- a/src/popup2/accounts/hint.component.html +++ b/src/popup2/accounts/hint.component.html @@ -1,23 +1,27 @@ -
-
-

{{'passwordHint' | i18n}}

-
-
-
- - -
-
-
- {{'enterEmailToGetHint' | i18n}} -
+ +
+
+ {{'cancel' | i18n}}
-
- - {{'cancel' | i18n}} +
+
+
+
+
+ + +
+
+
+ {{'enterEmailToGetHint' | i18n}}
diff --git a/src/popup2/accounts/home.component.html b/src/popup2/accounts/home.component.html new file mode 100644 index 0000000000..225b6c2429 --- /dev/null +++ b/src/popup2/accounts/home.component.html @@ -0,0 +1,15 @@ +
+ +  {{'settings' | i18n}} + + bitwarden +

{{'loginOrCreateNewAccount' | i18n}}

+
+ + {{'createAccount' | i18n}} + + + {{'login' | i18n}} + +
+
diff --git a/src/popup2/accounts/home.component.ts b/src/popup2/accounts/home.component.ts new file mode 100644 index 0000000000..acdd99dabe --- /dev/null +++ b/src/popup2/accounts/home.component.ts @@ -0,0 +1,18 @@ +import * as template from './home.component.html'; + +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; + +import { ToasterService } from 'angular2-toaster'; +import { Angulartics2 } from 'angulartics2'; + +import { I18nService } from 'jslib/abstractions/i18n.service'; + +@Component({ + selector: 'app-home', + template: template, +}) +export class HomeComponent { + constructor(private router: Router, i18nService: I18nService, + analytics: Angulartics2, toasterService: ToasterService) { } +} diff --git a/src/popup2/accounts/login.component.html b/src/popup2/accounts/login.component.html index bea95b7088..9c387e61dc 100644 --- a/src/popup2/accounts/login.component.html +++ b/src/popup2/accounts/login.component.html @@ -1,43 +1,42 @@ -
-
-

{{'loginOrCreateNewAccount' | i18n}}

-
-
-
- - + +
+
+ {{'cancel' | i18n}} +
+
+ {{'appName' | i18n}} +
+
+ +
+
+
+
+
+ + +
+
+
+ +
-
-
- - -
-
- - - -
+
+ + +
-
- - - {{'createAccount' | i18n}} - -
-
- {{'getMasterPasswordHint' | i18n}} -
- -  {{'settings' | i18n}} -
+

+ {{'getMasterPasswordHint' | i18n}} +

diff --git a/src/popup2/accounts/register.component.html b/src/popup2/accounts/register.component.html index 055eabc16c..8589e4a82a 100644 --- a/src/popup2/accounts/register.component.html +++ b/src/popup2/accounts/register.component.html @@ -1,64 +1,68 @@ -
-
-

{{'createAccount' | i18n}}

-
-
-
- - -
-
-
- - -
-
- - - -
-
-
-
- {{'masterPassDesc' | i18n}} -
+ +
+
+ {{'cancel' | i18n}}
-
-
-
-
- - -
-
- - - -
-
-
- - -
-
-
- {{'masterPassHintDesc' | i18n}} -
+
+ {{'createAccount' | i18n}}
-
- - {{'cancel' | i18n}} +
+
+
+
+
+ + +
+
+
+ + +
+
+ + + +
+
+
+
+ {{'masterPassDesc' | i18n}} +
+
+
+
+
+
+ + +
+
+ + + +
+
+
+ + +
+
+
+ {{'masterPassHintDesc' | i18n}}
diff --git a/src/popup2/accounts/two-factor-options.component.html b/src/popup2/accounts/two-factor-options.component.html index 740365d1ea..ee4ce1b6a0 100644 --- a/src/popup2/accounts/two-factor-options.component.html +++ b/src/popup2/accounts/two-factor-options.component.html @@ -1,28 +1,22 @@ -
-
-
-
-
-
- {{'twoStepOptions' | i18n}} -
-
- - - {{p.name}} - {{p.description}} - - - {{'recoveryCodeTitle' | i18n}} - {{'recoveryCodeDesc' | i18n}} - -
-
-
-
- -
-
+
+
+ {{'close' | i18n}} +
+
+ {{'twoStepOptions' | i18n}} +
+
+
+
+
+ + {{p.name}} + {{p.description}} + + + {{'recoveryCodeTitle' | i18n}} + {{'recoveryCodeDesc' | i18n}} +
diff --git a/src/popup2/accounts/two-factor-options.component.ts b/src/popup2/accounts/two-factor-options.component.ts index 6115898431..22c9f09a8f 100644 --- a/src/popup2/accounts/two-factor-options.component.ts +++ b/src/popup2/accounts/two-factor-options.component.ts @@ -24,4 +24,10 @@ export class TwoFactorOptionsComponent extends BaseTwoFactorOptionsComponent { i18nService: I18nService, platformUtilsService: PlatformUtilsService) { super(authService, router, analytics, toasterService, i18nService, platformUtilsService); } + + choose(p: any) { + super.choose(p); + this.authService.selectedTwoFactorProviderType = p.type; + this.router.navigate(['2fa']); + } } diff --git a/src/popup2/accounts/two-factor.component.html b/src/popup2/accounts/two-factor.component.html index 697a5f3c83..c744d34d68 100644 --- a/src/popup2/accounts/two-factor.component.html +++ b/src/popup2/accounts/two-factor.component.html @@ -1,12 +1,29 @@
-
-

{{title}}

-

{{'enterVerificationCodeApp' | i18n}}

-

- {{'enterVerificationCodeEmail' | i18n : twoFactorEmail}} -

-
+
+
+ {{'cancel' | i18n}} +
+
+ {{title}} +
+
+ +
+
+ +
+

{{'enterVerificationCodeApp' | i18n}}

+

+ {{'enterVerificationCodeEmail' | i18n : twoFactorEmail}} +

+
+
@@ -18,57 +35,49 @@
- + + +

{{'insertYubiKey' | i18n}}

-
-
-
- - -
-
- - -
-
-
- - -
-
-
-
- - -
-
-
- -
+ +
+
-
-

{{'noTwoStepProviders' | i18n}}

-

{{'noTwoStepProviders2' | i18n}}

+
+ + +
+
+ +
-
- - {{'cancel' | i18n}} + + +
+
+
+
+ + +
+
-
+ +
+

{{'noTwoStepProviders' | i18n}}

+

{{'noTwoStepProviders2' | i18n}}

+
+
+

{{'useAnotherTwoStepMethod' | i18n}} - +

+

+ {{'sendVerificationCodeEmailAgain' | i18n}} -

+

- diff --git a/src/popup2/app-routing.module.ts b/src/popup2/app-routing.module.ts index 79cc2dd0e6..1a08d599e0 100644 --- a/src/popup2/app-routing.module.ts +++ b/src/popup2/app-routing.module.ts @@ -6,13 +6,14 @@ import { import { EnvironmentComponent } from './accounts/environment.component'; import { HintComponent } from './accounts/hint.component'; +import { HomeComponent } from './accounts/home.component'; import { LoginComponent } from './accounts/login.component'; import { RegisterComponent } from './accounts/register.component'; import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component'; import { TwoFactorComponent } from './accounts/two-factor.component'; const routes: Routes = [ - { path: '', redirectTo: '/login', pathMatch: 'full' }, + { path: '', component: HomeComponent }, { path: 'login', component: LoginComponent }, { path: '2fa', component: TwoFactorComponent }, { path: '2fa-options', component: TwoFactorOptionsComponent }, diff --git a/src/popup2/app.component.ts b/src/popup2/app.component.ts index 7444c940f1..651588ea6a 100644 --- a/src/popup2/app.component.ts +++ b/src/popup2/app.component.ts @@ -30,8 +30,10 @@ export class AppComponent { toasterConfig: ToasterConfig = new ToasterConfig({ showCloseButton: true, mouseoverTimerStop: true, - animation: 'flyRight', - limit: 5, + animation: 'slideUp', + limit: 2, + positionClass: 'toast-bottom-full-width', + newestOnTop: false }); constructor(private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics, private analytics: Angulartics2, diff --git a/src/popup2/app.module.ts b/src/popup2/app.module.ts index fdec16ac60..086d06b7b2 100644 --- a/src/popup2/app.module.ts +++ b/src/popup2/app.module.ts @@ -17,6 +17,7 @@ import { AppComponent } from './app.component'; import { EnvironmentComponent } from './accounts/environment.component'; import { HintComponent } from './accounts/hint.component'; +import { HomeComponent } from './accounts/home.component'; import { LoginComponent } from './accounts/login.component'; import { RegisterComponent } from './accounts/register.component'; import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component'; @@ -25,6 +26,7 @@ import { TwoFactorComponent } from './accounts/two-factor.component'; import { ApiActionDirective } from 'jslib/angular/directives/api-action.directive'; import { AutofocusDirective } from 'jslib/angular/directives/autofocus.directive'; import { BlurClickDirective } from 'jslib/angular/directives/blur-click.directive'; +import { BoxRowDirective } from 'jslib/angular/directives/box-row.directive'; import { FallbackSrcDirective } from 'jslib/angular/directives/fallback-src.directive'; import { StopClickDirective } from 'jslib/angular/directives/stop-click.directive'; import { StopPropDirective } from 'jslib/angular/directives/stop-prop.directive'; @@ -50,8 +52,10 @@ import { I18nPipe } from 'jslib/angular/pipes/i18n.pipe'; AppComponent, AutofocusDirective, BlurClickDirective, + BoxRowDirective, EnvironmentComponent, FallbackSrcDirective, + HomeComponent, HintComponent, I18nPipe, LoginComponent, diff --git a/src/popup2/images/loading.svg b/src/popup2/images/loading.svg new file mode 100644 index 0000000000..7076310516 --- /dev/null +++ b/src/popup2/images/loading.svg @@ -0,0 +1,6 @@ + + + Loading... + + diff --git a/src/popup2/images/logo.png b/src/popup2/images/logo.png new file mode 100644 index 0000000000..33ced5b12e Binary files /dev/null and b/src/popup2/images/logo.png differ diff --git a/src/popup2/images/logo@2x.png b/src/popup2/images/logo@2x.png new file mode 100644 index 0000000000..2a0ba60b9b Binary files /dev/null and b/src/popup2/images/logo@2x.png differ diff --git a/src/popup2/images/logo@3x.png b/src/popup2/images/logo@3x.png new file mode 100644 index 0000000000..9047316769 Binary files /dev/null and b/src/popup2/images/logo@3x.png differ diff --git a/src/popup2/images/u2fkey.jpg b/src/popup2/images/u2fkey.jpg new file mode 100644 index 0000000000..8013df0e56 Binary files /dev/null and b/src/popup2/images/u2fkey.jpg differ diff --git a/src/popup2/images/yubikey.jpg b/src/popup2/images/yubikey.jpg new file mode 100644 index 0000000000..9ddf755dec Binary files /dev/null and b/src/popup2/images/yubikey.jpg differ diff --git a/src/scss/base.scss b/src/scss/base.scss new file mode 100644 index 0000000000..735b0375b8 --- /dev/null +++ b/src/scss/base.scss @@ -0,0 +1,143 @@ +@import "variables.scss"; + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html, body { + background-color: $background-color-alt2; + font-family: $font-family-sans-serif; + font-size: $font-size-base; + color: $text-color; + line-height: $line-height-base; + -webkit-font-smoothing: antialiased; +} + +body { + width: 375px !important; + height: 600px !important; + overflow: hidden; + + &.sm { + width: 375px !important; + height: 500px !important; + } + + &.xs { + width: 375px !important; + height: 300px !important; + } +} + +h1, h2, h3, h4, h5, h6 { + font-family: $font-family-sans-serif; + color: $text-color; +} + +p { + margin-bottom: 10px; +} + +ul, ol { + margin-bottom: 10px; +} + +img { + border: none; +} + +a { + color: $brand-primary; + text-decoration: none; + + &:hover, &:focus { + color: darken($brand-primary, 6%); + } +} + +input, select, textarea, button { + font-size: $font-size-base; + font-family: $font-family-sans-serif; +} + +button { + white-space: nowrap; + cursor: pointer; +} + +textarea { + resize: vertical; +} + +div::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +div::-webkit-scrollbar-track { + background-color: transparent; +} + +div::-webkit-scrollbar-thumb { + background-color: rgba(100,100,100,.2); + border-radius: 10px; + margin-right: 1px; + + &:hover { + background-color: rgba(100,100,100,.4); + } +} + +header { + background-color: $brand-primary; + min-height: 44px; + max-height: 44px; + color: white; + display: flex; + + .left, .right { + flex: 1; + display: flex; + min-width: -webkit-min-content; /* Workaround to Chrome bug */ + } + + .right { + justify-content: flex-end; + } + + .center { + display: flex; + align-items: center; + text-align: center; + } + + button, a { + background: $brand-primary; + border: none; + color: white; + padding: 0 10px; + text-decoration: none; + display: flex; + flex-direction: column; + justify-content: center; + + &:hover, &:focus { + background-color: rgba(255, 255, 255, 0.1); + color: white; + } + + &:focus { + text-decoration: underline; + } + } + + .title { + font-weight: bold; + } +} + +.content { + padding: 15px; +} diff --git a/src/scss/box.scss b/src/scss/box.scss new file mode 100644 index 0000000000..d9677d0b7c --- /dev/null +++ b/src/scss/box.scss @@ -0,0 +1,254 @@ +@import "variables.scss"; + +.box { + width: 100%; + margin: 10px 0; + + .box-header { + margin: 0 10px 5px 10px; + color: $gray-light; + text-transform: uppercase; + } + + .box-content { + background: $box-background-color; + border-top: 1px solid $border-color-dark; + border-bottom: 1px solid $border-color-dark; + + &.box-content-padded { + padding: 10px 15px; + } + + .box-content-row { + display: block; + padding: 10px 15px; + position: relative; + z-index: 1; + + &:before { + content: ""; + position: absolute; + right: 0; + bottom: 0; + height: 1px; + width: calc(100% - 10px); + border-bottom: 1px solid $box-border-color; + } + + &:first-child, &:last-child { + border-radius: $border-radius; + } + + &:last-child { + &:before { + border: none; + height: 0; + } + } + + &:after { + content: ""; + display: table; + clear: both; + } + + &:hover, &:focus, &.active { + background-color: $box-background-hover-color; + } + + &.pre { + white-space: pre; + overflow-x: auto; + } + + .row-label, label { + font-size: $font-size-small; + color: $text-muted; + display: block; + width: 100%; + margin-bottom: 5px; + } + + .text, .detail { + display: block; + color: $text-color; + } + + .detail { + font-size: $font-size-small; + color: $text-muted; + } + + .img-right { + float: right; + margin-left: 10px; + } + + .row-main { + flex-grow: 1; + } + + &.box-content-row-flex, &.box-content-row-checkbox, &.box-content-row-input, + &.box-content-row-slider, &.box-content-row-multi { + display: flex; + align-items: center; + word-break: break-word; + } + + &.box-content-row-multi { + width: 100%; + + input:not([type="checkbox"]) { + width: 100%; + } + + input + label.sr-only + select { + margin-top: 5px; + } + + > a { + padding: 8px 8px 8px 4px; + color: $brand-danger; + margin: 0; + } + } + + &.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider { + label, .row-label { + font-size: $font-size-base; + color: $text-color; + display: inline; + width: initial; + margin-bottom: 0; + } + + > span { + color: $text-muted; + } + + > input { + margin: 0 0 0 auto; + padding: 0; + } + + > * { + margin-right: 15px; + + &:last-child { + margin-right: 0; + } + } + } + + &.box-content-row-input { + label { + white-space: nowrap; + } + + input { + text-align: right; + } + } + + &.box-content-row-slider { + input[type="range"] { + height: 10px; + } + + input[type="number"] { + width: 45px; + } + + label { + white-space: nowrap; + } + } + + input:not([type="checkbox"]), textarea { + border: none; + width: 100%; + background-color: transparent; + + &::-webkit-input-placeholder { + color: lighten($gray-light, 35%); + } + + &:focus { + outline: none; + } + } + + select { + width: 100%; + border: 1px solid darken($border-color-dark, 7%); + border-radius: $border-radius; + } + + .action-buttons { + display: flex; + margin-left: 5px; + + .row-btn { + cursor: pointer; + padding: 10px 8px; + background: none; + border: none; + color: $brand-primary; + + &:hover, &:focus { + color: darken($brand-primary, 10%); + } + + &.disabled { + color: $list-icon-color; + + &:hover { + color: $list-icon-color; + } + } + + &:last-child { + padding-right: 2px !important; + } + } + + &.no-pad .row-btn { + padding-top: 0; + padding-bottom: 0; + } + } + + select.field-type { + margin: 5px 0 0 25px; + width: calc(100% - 25px); + } + + .row-sub-icon { + color: $list-icon-color; + } + + .row-sub-label { + margin: 0 15px; + color: $gray-light; + white-space: nowrap; + } + } + + &.condensed .box-content-row, .box-content-row.condensed { + padding-top: 5px; + padding-bottom: 5px; + } + + &.no-hover .box-content-row, .box-content-row.no-hover { + &:hover, &:focus { + background-color: initial; + } + } + } + + .box-footer { + margin: 5px 10px; + font-size: $font-size-small; + color: $text-muted; + } +} diff --git a/src/scss/environment.scss b/src/scss/environment.scss new file mode 100644 index 0000000000..946c04a9ee --- /dev/null +++ b/src/scss/environment.scss @@ -0,0 +1,8 @@ +@import "variables.scss"; + +html.browser_firefox, html.browser_edge { + body { + width: 320px !important; + height: 568px !important; + } +} diff --git a/src/scss/misc.scss b/src/scss/misc.scss new file mode 100644 index 0000000000..dc95c6336c --- /dev/null +++ b/src/scss/misc.scss @@ -0,0 +1,76 @@ +@import "variables.scss"; + +small { + font-size: $font-size-small; +} + +.text-primary { + color: $brand-primary !important; +} + +.text-success { + color: $brand-success !important; +} + +.text-muted { + color: $text-muted !important; +} + +.text-default { + color: $text-color !important; +} + +.text-accent { + color: $brand-primary-accent; +} + +.text-center { + text-align: center; +} + +.no-margin { + margin: 0 !important; +} + +[hidden] { + display: none !important; +} + +.monospaced { + font-family: $font-family-monospace; +} + +.img-responsive { + display: block; + max-width: 100%; + height: auto; +} + +.img-rounded { + border-radius: 6px; +} + +.sr-only { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + border: 0 !important; +} + +#duo-frame { + // TODO +} + +app-root > #loading { + display: flex; + text-align: center; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + color: $text-muted; +} diff --git a/src/scss/plugins.scss b/src/scss/plugins.scss new file mode 100644 index 0000000000..bccb73c5aa --- /dev/null +++ b/src/scss/plugins.scss @@ -0,0 +1,81 @@ +$fa-font-path: "~font-awesome/fonts"; +@import "~font-awesome/scss/font-awesome.scss"; +@import "~angular2-toaster/toaster"; + +@import "variables.scss"; + +#toast-container { + .toast-close-button { + right: -0.15em; + } + + &.toast-bottom-full-width div.toast { + margin: 0 10px 10px; + width: calc(100% - 20px); + } + + .toast { + opacity: 1 !important; + background-image: none !important; + border-radius: $border-radius; + box-shadow: 0 0 8px rgba(0, 0, 0, 0.35); + display: flex; + align-items: center; + + &:hover { + box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); + } + + &:before { + position: fixed; + font-family: FontAwesome; + font-size: 25px; + line-height: 20px; + float: left; + color: #ffffff; + padding-right: 0.5em; + margin: auto 0 auto -36px; + } + + .toaster-icon { + display: none; + } + + &.toast-danger, &.toast-error { + background-image: none !important; + background-color: $brand-danger; + + &:before { + content: "\f0e7"; + margin-left: -30px; + } + } + + &.toast-warning { + background-image: none !important; + background-color: $brand-warning; + + &:before { + content: "\f071"; + } + } + + &.toast-info { + background-image: none !important; + background-color: $brand-info; + + &:before { + content: "\f05a"; + } + } + + &.toast-success { + background-image: none !important; + background-color: $brand-success; + + &:before { + content: "\f00C"; + } + } + } +} diff --git a/src/scss/popup.scss b/src/scss/popup.scss index 8b70edc5fc..bea0361e20 100644 --- a/src/scss/popup.scss +++ b/src/scss/popup.scss @@ -1,3 +1,7 @@ -body { - color: black; -} +@import "../css/webfonts.css"; +@import "variables.scss"; +@import "base.scss"; +@import "box.scss"; +@import "misc.scss"; +@import "plugins.scss"; +@import "environment.scss"; diff --git a/src/scss/variables.scss b/src/scss/variables.scss new file mode 100644 index 0000000000..e049dde946 --- /dev/null +++ b/src/scss/variables.scss @@ -0,0 +1,38 @@ +$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; +$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace; +$font-size-base: 14px; +$font-size-large: 18px; +$font-size-small: 12px; +$text-color: #000000; +$background-color: #efeff4; +$border-color: #f0f0f0; +$border-color-dark: #ddd; +$list-item-hover: #fbfbfb; +$list-icon-color: #c7c7cd; +$border-radius: 3px; +$line-height-base: 1.42857143; + +$gray: #555; +$gray-light: #777; +$text-muted: $gray-light; + +$brand-primary: #3c8dbc; +$brand-danger: #dd4b39; +$brand-success: #00a65a; +$brand-info: #555555; +$brand-warning: #bf7e16; +$brand-primary-accent: #286090; + +$background-color: white; +$background-color-alt: #f9fafc; +$background-color-alt2: #ecf0f5; + +$box-background-color: $background-color; +$box-background-hover-color: $list-item-hover; +$box-border-color: $border-color; + +$button-border-color: darken($border-color-dark, 12%); +$button-backgound-color: white; +$button-color: lighten($text-color, 40%); +$button-color-primary: darken($brand-primary, 8%); +$button-color-danger: darken($brand-danger, 10%);