Create first design of the ring + bg sheet + add icons and update item
This commit is contained in:
Mandar
@@ -1,11 +1,12 @@
|
||||
/* Global */
|
||||
@import "../scss/fonts";
|
||||
@import "../scss/colors";
|
||||
@import "../scss/global";
|
||||
@import "../scss/fonts";
|
||||
@import "../scss/ui";
|
||||
@import "../scss/dices";
|
||||
|
||||
.l5r5e {
|
||||
@import "../scss/sheet";
|
||||
@import "../scss/sheets";
|
||||
@import "../scss/nav";
|
||||
@import "../scss/rings";
|
||||
@import "../scss/skills";
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,9 +1,62 @@
|
||||
//SCSS
|
||||
// l5re5.scss
|
||||
.testing {
|
||||
width: percentage(1/7);
|
||||
}
|
||||
// test
|
||||
.testing {
|
||||
width: percentage(2/7);
|
||||
}
|
||||
/** Colors **/
|
||||
|
||||
// -- Global
|
||||
$white: rgba(255, 255, 255, 0.75);
|
||||
$black: rgba(0, 0, 0, 0.75);
|
||||
$red: rgba(255, 0, 0, 0.75);
|
||||
$orange: rgba(255, 100, 0, 0.75);
|
||||
$blue: rgba(0, 0, 255, 0.75);
|
||||
$green: rgba(0, 255, 0, 0.75);
|
||||
|
||||
// color title
|
||||
$l5r5e-title: rgb(186, 187, 177);
|
||||
// color bold
|
||||
$l5r5e-bold: rgb(118, 79, 64);
|
||||
// color red
|
||||
$l5r5e-red: rgb(150, 60, 65);
|
||||
// color white 0.5
|
||||
$l5r5e-white: rgba(255, 255, 255, 0.5);
|
||||
// color black 0.5
|
||||
$l5r5e-black: rgba(0, 0, 0, 0.5);
|
||||
|
||||
// Earth
|
||||
$l5r5e-earth: rgb(110, 141, 107);
|
||||
// Air
|
||||
$l5r5e-air: rgb(142, 118, 140);
|
||||
// Water
|
||||
$l5r5e-water: rgb(110, 139, 145);
|
||||
// Fire
|
||||
$l5r5e-fire: rgb(146, 111, 71);
|
||||
// Void
|
||||
$l5r5e-void: rgb(77, 72, 68);
|
||||
|
||||
// -- Clans
|
||||
|
||||
// Crab
|
||||
$l5r5e-dragon: rgb(130, 130, 140);
|
||||
// Crane
|
||||
$l5r5e-dragon: rgb(120, 145, 145);
|
||||
// Dragon
|
||||
$l5r5e-dragon: rgb(85, 130, 110);
|
||||
// Lion
|
||||
$l5r5e-dragon: rgb(160, 140, 80);
|
||||
// Mantis
|
||||
$l5r5e-dragon: rgb(45, 85, 30);
|
||||
// Phoenix
|
||||
$l5r5e-dragon: rgb(145, 190, 175);
|
||||
// Scorpion
|
||||
$l5r5e-dragon: rgb(155, 70, 60);
|
||||
// Unicorn
|
||||
$l5r5e-dragon: rgb(120, 90, 135);
|
||||
// Spider
|
||||
$l5r5e-dragon: rgb(0, 0, 0);
|
||||
|
||||
.Crab {}
|
||||
.Crane {}
|
||||
.Dragon {}
|
||||
.Lion {}
|
||||
.Mantis {}
|
||||
.Phoenix {}
|
||||
.Scorpion {}
|
||||
.Unicorn {}
|
||||
.Spider {}
|
||||
@@ -1,9 +1,42 @@
|
||||
//SCSS
|
||||
// l5re5.scss
|
||||
.testing {
|
||||
width: percentage(1/7);
|
||||
/** Fonts **/
|
||||
|
||||
// Font Logotype L5R
|
||||
@font-face {
|
||||
font-family: "LogotypeL5r";
|
||||
src: url('../fonts/LogotypeL5r.ttf') format("truetype");
|
||||
}
|
||||
// test
|
||||
.testing {
|
||||
width: percentage(2/7);
|
||||
}
|
||||
|
||||
// Font BrushtipTexe
|
||||
@font-face {
|
||||
font-family: "BrushtipTexe";
|
||||
src: url('../fonts/BrushtipTexe.otf') format("opentype");
|
||||
}
|
||||
|
||||
$font-primary: "Roboto", sans-serif;
|
||||
$font-secondary: "BrushtipTexe", sans-serif;
|
||||
$font-dice: "LogotypeL5r", sans-serif;
|
||||
|
||||
h1 {
|
||||
font: 1.5rem "BrushtipTexe";
|
||||
}
|
||||
|
||||
i.strife, i.success, i.explosive, i.opportunity, i.d6, i.d12,
|
||||
i.i_earth, i.i_water, i.i_fire, i.i_air, i.i_void {
|
||||
font-family: LogotypeL5r;
|
||||
line-height: 1rem;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
i.strife:before { content: "f"; }
|
||||
i.success:before { content: "s"; }
|
||||
i.explosive:before { content: "e"; }
|
||||
i.opportunity:before { content: "o"; }
|
||||
i.d6:before { content: "r"; }
|
||||
i.d12:before { content: "k"; }
|
||||
i.i_earth:before { content: "g"; }
|
||||
i.i_water:before { content: "w"; }
|
||||
i.i_fire:before { content: "i"; }
|
||||
i.i_air:before { content: "a"; }
|
||||
i.i_void:before { content: "v"; }
|
||||
25
system/styles/scss/global.scss
Normal file
25
system/styles/scss/global.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
/** Global **/
|
||||
|
||||
/* Windows */
|
||||
.window-app {
|
||||
.window-content {
|
||||
background: url("../assets/imgs/bgL5R.jpg") no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus, Active */
|
||||
* {
|
||||
transition-property: background, color, border-color, text-shadow, box-shadow;
|
||||
transition-duration: 0.5s;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="time"]:focus {box-shadow: 0 0 6px $red;}
|
||||
.tabs .item.active {text-shadow: 0 0 10px $red;}
|
||||
|
||||
/* lists */
|
||||
ul, li {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -1,9 +1,143 @@
|
||||
//SCSS
|
||||
// l5re5.scss
|
||||
.testing {
|
||||
width: percentage(1/7);
|
||||
}
|
||||
// test
|
||||
.testing {
|
||||
width: percentage(2/7);
|
||||
/** Rings **/
|
||||
|
||||
.rings {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
color: $white;
|
||||
// All
|
||||
#earth, #air, #water, #fire, #void {
|
||||
position: relative;
|
||||
flex: 1 1 50%;
|
||||
text-align: center;
|
||||
|
||||
i.i_earth, i.i_water, i.i_fire, i.i_air, i.i_void {
|
||||
font-size: 5rem;
|
||||
line-height: 4.75rem;
|
||||
}
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
width: 5rem;
|
||||
line-height: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
border-radius: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: 2px solid $l5r5e-title;
|
||||
color: $white;
|
||||
&:hover {
|
||||
border: 2px solid $red;
|
||||
text-shadow: 0 0 6px $red;
|
||||
box-shadow: 0 0 6px inset $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Earth
|
||||
#earth {
|
||||
float: right;
|
||||
color: $l5r5e-earth;
|
||||
input {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: -1rem;
|
||||
left: auto;
|
||||
background: $l5r5e-earth;
|
||||
}
|
||||
label {
|
||||
strong {
|
||||
position: absolute;
|
||||
bottom: 0.75rem;
|
||||
left: -1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Air
|
||||
#air {
|
||||
color: $l5r5e-air;
|
||||
input {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: -1rem;
|
||||
left: 0;
|
||||
background: $l5r5e-air;
|
||||
}
|
||||
label {
|
||||
float: left;
|
||||
strong {
|
||||
position: absolute;
|
||||
bottom: 0.75rem;
|
||||
right: -1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Water
|
||||
#water {
|
||||
float: right;
|
||||
color: $l5r5e-water;
|
||||
padding-right: 2rem;
|
||||
input {
|
||||
top: 17%;
|
||||
right: -1.25rem;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
background: $l5r5e-water;
|
||||
}
|
||||
label {
|
||||
strong {
|
||||
position: absolute;
|
||||
bottom: -0.75rem;
|
||||
right: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fire
|
||||
#fire {
|
||||
color: $l5r5e-fire;
|
||||
padding-left: 2rem;
|
||||
input {
|
||||
top: 17%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: -1.25rem;
|
||||
background: $l5r5e-fire;
|
||||
}
|
||||
label {
|
||||
float: left;
|
||||
strong {
|
||||
position: absolute;
|
||||
bottom: -0.75rem;
|
||||
right: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Void
|
||||
#void {
|
||||
top: -2rem;
|
||||
margin: 0 calc(50% - 2.5rem);
|
||||
color: $l5r5e-void;
|
||||
input {
|
||||
top: -1rem;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 30%;
|
||||
background: $l5r5e-void;
|
||||
}
|
||||
label {
|
||||
strong {
|
||||
position: absolute;
|
||||
bottom: -0.75rem;
|
||||
left: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
//SCSS
|
||||
// l5re5.scss
|
||||
.testing {
|
||||
width: percentage(1/7);
|
||||
}
|
||||
// test
|
||||
.testing {
|
||||
width: percentage(2/7);
|
||||
}
|
||||
57
system/styles/scss/sheets.scss
Normal file
57
system/styles/scss/sheets.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
/** Sheets **/
|
||||
&.sheet {
|
||||
min-width: 600px;
|
||||
.sheet-header {
|
||||
h1 {
|
||||
flex: 0 0 100%;
|
||||
input {
|
||||
height: 3rem;
|
||||
line-height: 1.5rem;
|
||||
margin: 0;
|
||||
padding: 0 0 0.5rem;
|
||||
width: 100%;
|
||||
border: 1px solid $l5r5e-white;
|
||||
color: $l5r5e-red;
|
||||
}
|
||||
}
|
||||
img {
|
||||
flex: 0 0 150px;
|
||||
height: 150px;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
.header-fields {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.identity-wrapper {
|
||||
flex: 0 0 calc(100% - 150px - 0.25rem);
|
||||
.identity-content {
|
||||
flex: 0 0 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
li {
|
||||
flex: 33%;
|
||||
&:nth-child(1), &:nth-child(2) {
|
||||
flex: 50%;
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.rings {
|
||||
flex: 0 0 calc(50% - 0.25rem);
|
||||
display: flex;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
.social-content {
|
||||
flex: 0 0 100%;
|
||||
display: flex;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
.attributes-wrapper {
|
||||
flex: 0 0 calc(50% - 0.25rem);
|
||||
display: flex;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,22 @@
|
||||
//SCSS
|
||||
// l5re5.scss
|
||||
.testing {
|
||||
width: percentage(1/7);
|
||||
// sdebar
|
||||
#sidebar {
|
||||
#sidebar-tabs {
|
||||
flex: 0 0 1rem;
|
||||
box-sizing: border-box;
|
||||
margin: 0 0 0.25rem;
|
||||
border-bottom: 1px solid $l5r5e-white;
|
||||
box-shadow: none;
|
||||
> .item {
|
||||
line-height: 27px;
|
||||
border-radius: 100%;
|
||||
margin: 0;
|
||||
flex: 0 0 27px;
|
||||
height: 27px;
|
||||
.active {
|
||||
border: 1px solid $orange;
|
||||
box-shadow: 0 0 6px $orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// test
|
||||
.testing {
|
||||
width: percentage(2/7);
|
||||
}
|
||||
Reference in New Issue
Block a user