oreolek/raconteur
1
0
Fork 0
mirror of https://github.com/Oreolek/raconteur.git synced 2024-06-01 07:38:10 +03:00
Code Issues Releases Wiki Activity

Style changes

Browse source
This commit is contained in:
Bruno Dias 2015-04-10 22:16:22 -03:00
parent ca66662d60
commit 98b2f0bb0b
4 changed files with 183 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
devel/Gulpfile.js
View file

@ -35,12 +35,12 @@ var bundle = function () {
.pipe(buffer()) .pipe(buffer())
.pipe(sourcemaps.init({ .pipe(sourcemaps.init({
loadMaps: true, loadMaps: true,
sourceRoot: "../../../" includeContent: true
})) }))
.on('error', gutil.log.bind(gutil, 'Sourcemaps Error')) .on('error', gutil.log.bind(gutil, 'Sourcemaps Error'))
.pipe(sourcemaps.write('./')) .pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./build/game')) .pipe(gulp.dest('./build/game'))
.pipe(reload({stream: true})); .pipe(reload({stream: true, once: true}));
} }
/* /*
@ -89,4 +89,6 @@ gulp.task('serve', ['default'], function () {
server: './build' server: './build'
}); });
gulp.watch('less/*.less', ['less']);
}); });

13
devel/js/main.js
View file

@ -140,6 +140,19 @@ situation('iterators', {
optionText: 'Iterators' optionText: 'Iterators'
}); });
situation('progress-bar', {
before (character, system, from) {
system.animateQuality('intelligence', character.qualities.intelligence + 1);
},
content: `
# Progress Bars
Progress bars and other underlying Undum features are still accessible
through Undum's own API.
`,
tags: ['testing-option'],
optionText: 'Progress bars'
});
qualities({ qualities({
stats: { stats: {

32
devel/less/undum-mobile.less
View file

@ -33,7 +33,6 @@
position: static; position: static;
} }
.tools { .tools {
background-image: url("../img/text_bg.jpg");
position: relative; position: relative;
width: auto; width: auto;
} }
@ -49,7 +48,7 @@
/* Main content */ /* Main content */
#content_wrapper { #content_wrapper {
width: auto; width: 90vw;
padding: 2.0em; padding: 2.0em;
} }
#content { #content {
@ -59,18 +58,17 @@
/* Toolbar and menu */ /* Toolbar and menu */
#toolbar { #toolbar {
.content_box();
position: fixed; position: fixed;
z-index: 300; z-index: 300;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
background: transparent url("../img/toolbar_bg.jpg") repeat-x top left;
height: 36px; height: 36px;
padding: 8px; padding: 8px;
overflow: hidden; overflow: hidden;
-webkit-box-shadow: 0 0 16px rgba(0,0,0,0.75);
box-shadow: 0 0 16px rgba(0,0,0,0.75);
} }
#toolbar h1 { #toolbar h1 {
float: left; float: left;
font-weight: normal; font-weight: normal;
@ -80,24 +78,19 @@
color: #fc6; color: #fc6;
text-shadow: 0 -1px 0 rgba(0,0,0,0.4); text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
} }
#toolbar .nav { #toolbar .nav {
float: right; float: right;
margin: 0; margin: 0;
a {
display: block;
height:
background: black;
}
} }
#toolbar .nav a {
font-size: 16px;
line-height: 20px;
color: white;
padding: 4px 16px;
float: right;
text-decoration: none;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
-webkit-border-radius: 6px;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#C00), color-stop(0.45, #a00),
color-stop(0.55, #900), to(#900));
border: 2px solid #600;
}
#menu { #menu {
display: none; display: none;
position: fixed; position: fixed;
@ -105,7 +98,6 @@
left: 0; left: 0;
right: 0; right: 0;
font-size: 16px; font-size: 16px;
background-image: url("../img/tools_bg.jpg");
z-index: 200; z-index: 200;
list-style-type: none; list-style-type: none;
padding: 10px 0 0 0; padding: 10px 0 0 0;

265
devel/less/undum.less
View file

@ -1,14 +1,54 @@
@import "undum-mobile";
@body_bg: tan; /*
We're using a Material Design-inspired colour palette and look as our
default here.
Indigo (Main colour):
500 #3f51b5
100 #c5cae9
700 #303f9f
ORange (Accent colour):
500 #ff9800
White:
#ffffff
*/
@body_bg: #3f51b5; // Indigo 500
@content_bg: white; @content_bg: white;
@title_bg: steelblue; @title_bg: #c5cae9; // Indigo 100
@text-color: black; @text_color: rgba(0,0,0,0.87); // 87% opacity black
@link_color: #ff9800;
/* Typography */
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,400italic);
@body_font: 'Roboto', sans-serif;
@root_font_size: 18px;
/* Layout */
@middle_width: 32rem;
.material_box(@bg) {
background: @bg;
border-right: 1px solid darken(@bg, 20%);
border-bottom: 1px solid darken(@bg, 20%);
box-shadow: 2px 2px 1px 1px fade(black, 40%),
0 0 2px 2px fade(black, 10%);
}
.content_box() {
.material_box(@content_bg)
}
body { body {
background: @body_bg; background: @body_bg;
color: @text-color; color: @text_color;
font-size: 18px; font-size: @root_font_size;
font-family: @body_font;
} }
/* Basic structure */ /* Basic structure */
@ -24,34 +64,34 @@ body {
/* The title block */ /* The title block */
#title { #title {
max-width: 28em; .material_box(@title_bg);
margin: 2.2em auto 1.1em auto; max-width: @middle_width;
margin: 2rem auto 1rem auto;
background: @title_bg; background: @title_bg;
padding: 1.7em; padding: 32px;
border: 1px solid black;
cursor: pointer; /* Until we click to start. */ cursor: pointer; /* Until we click to start. */
.label { .label {
.content_box();
overflow: hidden; overflow: hidden;
padding: 2.0em; padding: 2.0em;
margin: auto; margin: auto;
max-width: 18em; max-width: 18em;
position: relative; position: relative;
border: 1px dashed black;
} }
h1 { h1 {
font-size: 1.6em; font-size: 2rem;
line-height: 1.4em; line-height: 2rem;
letter-spacing: 0.2em;
font-weight: normal; font-weight: normal;
padding-bottom: 1.1em; padding-bottom: 1.1em;
border-bottom: 1px solid #321; border-bottom: 1px solid #321;
} }
h2 { h2 {
font-size: 1.2em; font-size: 20px;
line-height: 20px;
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
margin: 1.1em 0 0 0; margin: 1.1em 0 0 0;
@ -92,22 +132,18 @@ body {
/* Main content */ /* Main content */
#content_wrapper { #content_wrapper {
max-width: 28em; .content_box();
max-width: @middle_width;
position: relative; position: relative;
background: @content_bg; margin: 1rem auto 1rem auto;
margin: 0.6em auto 1.1em auto; padding: 2rem;
padding: 2.8em;
display: none; /* Shown by Javascript */ display: none; /* Shown by Javascript */
overflow: auto; overflow: auto;
} }
span.drop + p {
text-indent: -0.4em;
}
p { p {
margin: 0; margin: 1rem 0rem;
-webkit-transition: text-indent 0.25s ease;
transition: text-indent 0.25s ease;
} }
hr { hr {
@ -118,62 +154,51 @@ hr {
height: 2px; height: 2px;
} }
p + p, p + img + p, p + hr + p { .options {
text-indent: 1.6em; .content_box();
}
ul {
margin: 0;
padding: 0 0 0 1em;
}
ul.options {
border: 2px solid #876;
padding: 0; padding: 0;
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0.7em; margin-bottom: 0.7em;
list-style-type: none; list-style-type: none;
border-radius: 4px;
}
ul.options li { li {
border-bottom: 1px solid #876; padding: 0.5rem;
padding: 0.5em; border-bottom: 1px solid darken(@content_bg, 10%);
} text-align: center;
ul.options li:hover { &:hover {
background-color: rgba(153,136,119,0.2); background: #fafafa;
cursor: pointer; }
}
ul.options li:last-child { &:last-child {
border-bottom: none; border-bottom: none;
}
}
} }
h1 { h1 {
font-size: 1.0em; font-size: 24px;
text-transform: uppercase; line-height: 24px;
letter-spacing: 2px; letter-spacing: 2px;
margin: 2.3em 0 1.1em 0;
color: #210; color: #210;
text-align: center;
}
h1:first-child {
margin-top: 0;
} }
a { a {
color: #900; color: @link_color;
text-decoration: none; text-decoration: none;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
&.raw {
/* External link */
}
&:hover {
color: lighten(@link_color, 20%);
}
} }
a.raw {
padding-right: 14px;
}
a:hover {
border-bottom: 1px dotted #900;
}
img.float_right { img.float_right {
float: right; float: right;
@ -192,27 +217,28 @@ img.float_left {
position: fixed; position: fixed;
width: 100%; width: 100%;
max-width: 56em; max-width: 56em;
top: 2.2em; top: 2rem;
left: 0; left: 0;
right: 0; right: 0;
margin: 0 auto; margin: 0 auto;
display: none; /* Shown by Javascript */ display: none; /* Shown by Javascript */
} }
.tools { .tools {
.content_box();
padding: 0.6em; padding: 0.6em;
width: 8.9em; width: 8.9em;
background: #cec3ae;
position: absolute; position: absolute;
}
.tools p { &.left {
font-size: 0.95em; left: 0.7rem;
line-height: 1.5em; }
}
.tools.left { &.right {
left: 0.4em; right: 0.7rem;
} }
.tools.right {
right: 0.4em;
} }
.tools h1 { .tools h1 {
@ -221,44 +247,59 @@ img.float_left {
border-bottom: 1px solid #321; border-bottom: 1px solid #321;
margin-bottom: 0.6em; margin-bottom: 0.6em;
} }
.buttons { .buttons {
padding-top: 0.6em; padding-top: 0.6em;
margin-top: 0.6em; margin-top: 0.6em;
border-top: 1px solid #321;
text-align: center; text-align: center;
}
.buttons button { button {
font-size: 0.8em; border: none;
background: #876; color: black;
color: #e6e6c6; margin: 0.2rem;
border: none; padding: 0.2rem 1rem;
padding: 0.3em 1.0em; background: @link_color;
cursor: pointer; font-size: 1rem;
border-radius: 4px; font-family: @body_font;
} border-bottom: 1px solid darken(@link_color, 10%);
.buttons button:hover { border-right: 1px solid darken(@link_color, 10%);
background: #987; box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2),
} 0 0 2px 0px rgba(0,0,0,0.2);
.buttons button + button {
margin-left: 0.3em; &:hover {
} background: lighten(@link_color, 10%);
.buttons button[disabled], .buttons button[disabled]:hover { }
background: #ba9;
color: #dcb; &:active {
cursor: default; background: lighten(@link_color, 30%);
}
&:disabled {
background: desaturate(@link_color, 40%);
color: black;
}
&:focus {
outline: none;
}
}
} }
#legal { #legal {
max-width: 33em; max-width: 32rem;
color: #654; color: rgba(0,0,0,0.5);
margin: 1em auto 0 auto; margin: 1em auto 0 auto;
padding-bottom: 2.2em; padding-bottom: 2.2em;
display: none; /* Shown by Javascript */ display: none; /* Shown by Javascript */
} }
#legal p { #legal p {
font-size: 0.7em; font-size: 0.8rem;
line-height: 1.3em; line-height: 1rem;
margin-bottom: 0.5em; margin-bottom: 0.2rem;
} }
#legal p + p { #legal p + p {
text-indent: 0; text-indent: 0;
@ -308,22 +349,20 @@ img.float_left {
.progress_bar { .progress_bar {
position: relative; position: relative;
overflow: hidden; margin: 0rem;
margin: 0.6em 0; width: 496px;
} }
.progress_bar_track { .progress_bar_track {
z-index: 100; z-index: 100;
background: rgba(255,255,255,0.25); border: 1px solid rgba(0,0,0,0.6);
border: 2px solid #876; height: 1rem;
height: 0.75em; width: 496px;
width: 27.7em;
clear: both; clear: both;
border-radius: 4px;
} }
.progress_bar_color { .progress_bar_color {
background: #987; background: @link_color;
width: 0; width: 0;
height: 0.75em; height: 1rem;
} }
.progress_bar span { .progress_bar span {
z-index: 100; z-index: 100;
@ -347,6 +386,8 @@ img.float_left {
display: none; display: none;
} }
/* Animation for .fade elements */
@keyframes fade_in{ @keyframes fade_in{
from { from {
color: rgba(0,0,0,0); color: rgba(0,0,0,0);
@ -368,4 +409,6 @@ img.float_left {
.fade { .fade {
animation: fade_in 500ms ease-in-out; animation: fade_in 500ms ease-in-out;
-webkit-animation: fade_in 500ms ease-in-out; -webkit-animation: fade_in 500ms ease-in-out;
} }
@import "undum-mobile";