Browse Source

Reorganized styles and scaleable logo.

pull/69/head
Simon Eisenmann 11 years ago
parent
commit
8ffc3af7f1
  1. 114
      src/styles/global/_base.scss
  2. 3
      src/styles/global/_branding.scss
  3. 57
      src/styles/global/_loader.scss
  4. 94
      src/styles/global/_pages.scss
  5. 4
      src/styles/global/_variables.scss
  6. 42
      src/styles/global/_views.scss
  7. 3
      src/styles/main.scss
  8. 6
      static/css/main.min.css
  9. 111
      static/img/logo.svg
  10. 1
      static/partials/page/welcome.html

114
src/styles/global/_base.scss

@ -38,39 +38,6 @@ a { @@ -38,39 +38,6 @@ a {
cursor: pointer;
}
#details {
background: white;
bottom: 0;
display: none;
font-size: 10px;
padding: 4px;
position: fixed;
right: 0;
z-index: 999;
}
.withChat,
.withBuddylist {
.mainview {
right: 260px;
}
}
.withBuddylist {
&.withChat .mainview {
right: 520px;
}
}
.mainview {
bottom: 0;
display: none;
left: 150px;
position: absolute;
right: 0;
top: 45px;
}
#background {
background: $main-background repeat;
bottom: 0;
@ -85,87 +52,6 @@ a { @@ -85,87 +52,6 @@ a {
}
}
#loader {
background: $load-logo no-repeat center;
background-size: contain;
bottom: 15%;
left: 15%;
max-width: 200px;
max-height: 150px;
margin: auto;
opacity: 1;
pointer-events: none;
position: fixed;
right: 15%;
top: 15%;
z-index: 20000;
transition-property: opacity;
transition-duration: .5s;
&.done {
opacity: 0;
}
> div {
color: $loading;
display: block;
font-size: 2em;
left: 0;
margin: 0 auto;
right: 0;
position: absolute;
bottom: 0px;
margin-bottom: -40px;
text-align: center;
text-shadow: 0 0 5px black;
}
.loader-message {
font-size: 0.5em;
}
}
#page {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 44px;
}
.welcome {
color: $welcome;
font-size: 1.1em;
margin-top: 80px;
text-shadow: 0 0 5px black;
max-width:600px;
h1 {
text-align: center;
}
.welcome-container {
max-width: 450px;
margin: 0 auto;
}
.welcome-input {
position: relative;
input {
padding-right: 105px;
}
}
.welcome-input-buttons {
text-shadow: none;
position: absolute;
top: 6px;
right: 8px;
a {
padding-right: .5em;
color: black;
}
}
}
.help-block {
color: $form-help-text;
}

3
src/styles/global/_branding.scss

File diff suppressed because one or more lines are too long

57
src/styles/global/_loader.scss

@ -0,0 +1,57 @@ @@ -0,0 +1,57 @@
/*
* Spreed WebRTC.
* Copyright (C) 2013-2014 struktur AG
*
* This file is part of Spreed WebRTC.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
#loader {
background: $load-logo no-repeat center;
background-size: contain;
bottom: 15%;
left: 15%;
max-width: 200px;
max-height: 150px;
margin: auto;
opacity: 1;
pointer-events: none;
position: fixed;
right: 15%;
top: 15%;
z-index: 20000;
transition-property: opacity;
transition-duration: .5s;
&.done {
opacity: 0;
}
> div {
color: $loading;
display: block;
font-size: 2em;
left: 0;
margin: 0 auto;
right: 0;
position: absolute;
bottom: 0px;
margin-bottom: -40px;
text-align: center;
text-shadow: 0 0 5px black;
}
.loader-message {
font-size: 0.5em;
}
}

94
src/styles/global/_pages.scss

@ -0,0 +1,94 @@ @@ -0,0 +1,94 @@
/*
* Spreed WebRTC.
* Copyright (C) 2013-2014 struktur AG
*
* This file is part of Spreed WebRTC.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
#page {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 44px;
}
.welcome {
color: $welcome;
font-size: 1.1em;
margin-top: 80px;
text-shadow: 0 0 5px black;
max-width:600px;
min-height: 160px;
padding-left:160px;
padding-right: 0px;
position: relative;
@include breakpt($breakpoint-medium) {
padding-left:0px;
margin: 0 10px;
}
h1 {
text-align: center;
white-space: nowrap;
@include breakpt($breakpoint-medium) {
white-space: normal;
}
}
.welcome-container {
max-width: 450px;
margin: 0 auto;
}
.welcome-logo {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
width: 140px;
background: $scalable-logo no-repeat left;
background-size: contain;
@include breakpt($breakpoint-medium) {
position: relative;
margin: 0 auto;
height: 70px;
width: 70px;
margin-top: 30px;
}
}
.welcome-input {
position: relative;
input {
padding-right: 105px;
}
}
.welcome-input-buttons {
text-shadow: none;
position: absolute;
top: 6px;
right: 8px;
a {
padding-right: .5em;
color: black;
}
}
}

4
src/styles/global/_variables.scss

File diff suppressed because one or more lines are too long

42
src/styles/global/_views.scss

@ -0,0 +1,42 @@ @@ -0,0 +1,42 @@
/*
* Spreed WebRTC.
* Copyright (C) 2013-2014 struktur AG
*
* This file is part of Spreed WebRTC.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
.mainview {
bottom: 0;
display: none;
left: 150px;
position: absolute;
right: 0;
top: 45px;
}
.withChat,
.withBuddylist {
.mainview {
right: 260px;
}
}
.withBuddylist {
&.withChat .mainview {
right: 520px;
}
}

3
src/styles/main.scss

@ -27,6 +27,9 @@ @@ -27,6 +27,9 @@
@import "global/mixins";
@import "global/base";
@import "global/loader";
@import "global/views";
@import "global/pages";
@import "global/angular";
@import "global/nicescroll";
@import "global/animations";

6
static/css/main.min.css vendored

File diff suppressed because one or more lines are too long

111
static/img/logo.svg

@ -0,0 +1,111 @@ @@ -0,0 +1,111 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg2"
version="1.1"
inkscape:version="0.48.3.1 r9886"
width="137.00049"
height="126.5"
xml:space="preserve"
sodipodi:docname="spreedWaves.svg"
inkscape:export-filename="/home/domain/longsleep/Desktop/spreedio/spreed_waves_big.png"
inkscape:export-xdpi="394.16"
inkscape:export-ydpi="394.16"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
id="defs6"><clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath18"><path
d="m 0,0 5244,0 0,1870.87 -5244,0 L 0,0 z"
id="path20"
inkscape:connector-curvature="0" /></clipPath>
</defs><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1265"
inkscape:window-height="752"
id="namedview4"
showgrid="false"
showguides="true"
inkscape:guide-bbox="true"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
borderlayer="false"
showborder="true"
inkscape:showpageshadow="true"
inkscape:zoom="2"
inkscape:cx="126.78497"
inkscape:cy="8.4274304"
inkscape:window-x="897"
inkscape:window-y="367"
inkscape:window-maximized="0"
inkscape:current-layer="layer2"
inkscape:snap-from-guide="true"><sodipodi:guide
position="0.00032359136,-108.50382"
orientation="0,855.51001"
id="guide3801" /><sodipodi:guide
position="855.51034,-108.50382"
orientation="-233.8625,0"
id="guide3803" /><sodipodi:guide
position="-6.5,126.5"
orientation="0,-855.51001"
id="guide3805" /><sodipodi:guide
position="0.00032359136,125.35867"
orientation="233.8625,0"
id="guide3807" /><sodipodi:guide
orientation="0,1"
position="-9.5,-3.0517578e-06"
id="guide3815" /><sodipodi:guide
orientation="1,0"
position="146.50049,125.35867"
id="guide4561" /></sodipodi:namedview><g
id="g10"
inkscape:groupmode="layer"
inkscape:label="waves"
transform="matrix(1.25,0,0,-1.25,3.2359136e-4,235.00383)"
style="display:inline"><g
transform="matrix(0.1,0,0,0.1,-8.40039,30.667003)"
id="g16"
clip-path="url(#clipPath18)"><path
d="m 667.434,1427.23 c 5.625,40.32 50,105 131.25,105 81.25,0 263.75,0 292.496,0 28.75,0 62.5,-6.25 83.75,40 -1.25,-30 -8.75,-130 -11.25,-146.25 -2.5,-16.25 -22.5,-137.5 -136.246,-138.75 -113.75,0 -297.5,0 -297.5,0 0,0 -58.75,6.88 -88.438,-46.25 -0.191,-0.39 20.938,152.5 25.938,186.25"
style="fill:#009534;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path22"
inkscape:connector-curvature="0" /><path
d="m 135.7852,939.398 c 11.2304,81.493 99.8238,212.27 262.0348,212.27 162.215,0 526.571,0 583.969,0 57.399,0 124.781,-12.637 167.201,80.862 -2.49,-60.647 -17.47,-262.811 -22.46,-295.659 -4.99,-32.851 -44.92,-277.973 -272.014,-280.5 -227.098,0 -593.95,0 -593.95,0 0,0 -118.9879,13.098 -176.5621,-93.5 -0.3828,-0.801 41.8008,308.301 51.7813,376.527"
style="fill:#84b819;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path24"
inkscape:connector-curvature="0" /></g><text
transform="scale(1,-1)"
sodipodi:linespacing="125%"
id="text3013"
y="-87.199997"
x="580"
style="font-size:9.60000038px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
xml:space="preserve"><tspan
y="-87.199997"
x="580"
id="tspan3015"
sodipodi:role="line" /></text>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="mask"
style="display:inline" /></g></svg>

After

Width:  |  Height:  |  Size: 4.4 KiB

1
static/partials/page/welcome.html

@ -1,4 +1,5 @@ @@ -1,4 +1,5 @@
<div class="welcome container-fluid" ng-controller="RoomchangeController">
<div class="welcome-logo"></div>
<h1>{{_("Create a room and talk together")}}</h1>
<div class="welcome-container">
<p>

Loading…
Cancel
Save