deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

homepage UI

es2016
Thibault Duplessis 2019-02-28 17:27:39 +07:00
parent bbf0b1c9fd
commit 35b164740f
16 changed files with 109 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/views/lobby/home.scala
View File

@ -83,15 +83,15 @@ object home {
div(cls := "lobby__table")(
div(cls := "lobby__start")(
a(href := routes.Setup.hookForm, cls := List(
"fat button config_hook" -> true,
"button button-metal config_hook" -> true,
"disabled" -> (playban.isDefined || currentGame.isDefined || ctx.isBot)
), trans.createAGame.frag()),
a(href := routes.Setup.friendForm(none), cls := List(
"fat button config_friend" -> true,
"button button-metal config_friend" -> true,
"disabled" -> currentGame.isDefined
), trans.playWithAFriend.frag()),
a(href := routes.Setup.aiForm, cls := List(
"fat button config_ai" -> true,
"button button-metal config_ai" -> true,
"disabled" -> currentGame.isDefined
), trans.playWithTheMachine.frag())
),

2
ui/common/css/_lichess.scss
View File

@ -11,6 +11,8 @@
@import 'base/unread';
@import 'base/util';
@include theme-style
@import 'layout/base';
@import 'layout/page-menu';

6
ui/common/css/abstract/_media-queries.scss
View File

@ -3,12 +3,12 @@
$mq-xx-small: (min-width 500px);
$mq-x-small: (min-width 650px);
$mq-small: (min-width 800px);
$mq-medium: (min-width 1000px);
$mq-medium: (min-width 980px);
$mq-large: (min-width 1120px);
$mq-x-large: (min-width 1260px);
$mq-not-small: (max-width 799px);
$mq-not-medium: (max-width 999px);
$mq-not-medium: (max-width 979px);
/* Heights */
@ -28,7 +28,7 @@ $mq-hover-no: (hover none);
/* Aliases */
$mq-main-margin: $mq-medium;
$mq-main-margin: $mq-small;
$mq-topnav-visible: $mq-medium;
$mq-topnav-hidden: $mq-not-medium;

2
ui/common/css/abstract/_variables.scss
View File

@ -2,6 +2,8 @@ $font-path: "../font";
$img-path: "../images";
$block-gap: 1.5vmin;
$block-gap-h: 1.5vh;
$block-gap-w: 1.5vw;
$box-radius-size: 3px;

4
ui/common/css/component/_button.scss
View File

@ -75,7 +75,7 @@
@extend %metal;
&,
&:hover {
color: $c-font;
color: $c-font-dim;
}
&:not(.disabled):hover {
@extend %metal-hover;
@ -87,8 +87,10 @@
}
&.active {
@extend %active;
color: #fff;
}
&.active:not(.disabled):hover {
@extend %active-hover;
color: #fff;
}
}

8
ui/common/css/component/_modal.scss
View File

@ -34,11 +34,3 @@
}
}
}
#top,
#main-wrap,
#friend_box {
body.overlayed & {
filter: blur(15px);
}
}

2
ui/common/css/theme/_dark.scss
View File

@ -95,6 +95,8 @@ $text-shadow: none;
}
}
@mixin theme-style { }
%metal {
@include metal;
}

2
ui/common/css/theme/_light.scss
View File

@ -28,6 +28,8 @@ $theme-dark: false;
}
}
@mixin theme-style { }
%metal {
@include metal;
}

32
ui/common/css/theme/_transp.scss
View File

@ -5,26 +5,28 @@ $theme: 'transp';
$c-font: hsl(0, 0%, 77%);
$c-font-dim: c-light($c-font, 66%);
$c-font-dimmer: c-light($c-font, 45%);
$c-font-clear: c-light($c-font, 84%);
$c-font-clearer: c-light($c-font, 92%);
$c-font-clear: c-light($c-font, 86%);
$c-font-clearer: c-light($c-font, 94%);
$c-font-page: $c-font-clear;
$c-bg-box: hsla(0, 0%, 0%, .6);
$c-bg-zebra: hsla(0, 0%, 100%, .05);
$c-bg-input: $c-bg-zebra;
body.transp {
&::before {
content: ' ';
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
will-change: transform;
z-index: -1;
@mixin theme-style {
body.transp {
&::before {
content: ' ';
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
will-change: transform;
z-index: -1;
}
}
}

58
ui/lobby/css/_layout.scss
View File

@ -1,5 +1,6 @@
$mq-col2: $mq-medium;
$mq-col3: $mq-x-large;
$mq-col2: $mq-xx-small;
$mq-col3: $mq-small;
$mq-col4: $mq-x-large;
$app-tabs-height: 30px;
@ -7,25 +8,46 @@ $app-tabs-height: 30px;
grid-area: main;
display: grid;
grid-template-rows: min-content minmax(400px, calc(80vh - #{$site-header-height} - 150px));
grid-template-areas:
'table'
'app'
'side'
'leader'
'tv'
'puzzle'
'leader'
'winner'
'tours'
'simuls'
'forum'
'blog'
'support'
'about';
grid-gap: $block-gap;
'about'
'.';
grid-gap: $block-gap-h $block-gap-w;
&__counters {
margin-top: $block-gap;
}
@include breakpoint($mq-col2) {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto repeat(3, fit-content(0));
grid-template-areas:
'table table'
'app app'
'side tv'
'side puzzle'
'leader winner'
'tours tours'
'simuls simuls'
'forum forum'
'blog blog'
'about support';
}
@include breakpoint($mq-col3) {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: max-content repeat(3, fit-content(0));
@ -38,9 +60,25 @@ $app-tabs-height: 30px;
'about simuls simuls'
'support forum forum '
'. blog blog';
&__start {
flex-flow: column;
align-items: stretch;
justify-content: center;
}
&__counters {
margin: #{$block-gap / 2} 0 #{$block-gap / -2} 0;
}
&__about {
justify-self: center;
margin-top: .5em;
}
.timeline {
margin-left: 0;
}
}
@include breakpoint($mq-col3) {
@include breakpoint($mq-col4) {
grid-template-columns: repeat(4, 1fr);
@ -57,6 +95,12 @@ $app-tabs-height: 30px;
&__tournaments {
max-height: 20em;
}
&__side {
margin-top: .3em;
}
&__counters {
margin: 0;
}
}
&__side { grid-area: side; }

2
ui/lobby/css/_lobby.scss
View File

@ -14,10 +14,8 @@
.lobby__side {
@extend %flex-column;
margin-top: .3em;
overflow: hidden;
}
.lobby__about {
justify-self: center;
margin-top: .5em;
}

22
ui/lobby/css/_table.scss
View File

@ -4,27 +4,37 @@
position: relative;
}
&__start {
@extend %flex-column;
justify-content: center;
@extend %flex-center;
justify-content: space-around;
flex: 1 1 auto;
a {
font-size: 1.3em;
font-size: 1.1em;
text-align: center;
letter-spacing: -1px;
&.disabled {
opacity: 0.2;
}
margin: .2em 0;
padding: .5em;
@include breakpoint($mq-col3) {
}
@include breakpoint($mq-col4) {
justify-content: center;
a {
margin: 1.2em 0;
padding: 1em;
}
}
}
&__counters {
@extend %flex-column;
@extend %flex-between;
background: $c-bg-zebra;
padding: $block-gap #{$block-gap * 2};
@include breakpoint($mq-col3) {
background: none;
padding: 0;
}
@include breakpoint($mq-col4) {
flex-flow: column;
align-items: flex-start;
position: absolute;
bottom: 0;
}

2
ui/lobby/css/_timeline.scss
View File

@ -1,6 +1,6 @@
.timeline {
flex: 1 1 auto;
margin-top: 1em;
margin: 1em 0 0 $block-gap;
color: $c-font-page;
overflow: hidden;
&:hover {

7
ui/lobby/css/app/_app.scss
View File

@ -6,15 +6,18 @@
.lobby__app {
@extend %flex-column;
height: 700px;
max-height: 90vh;
user-select: none;
&__content {
@extend %box-neat;
flex: 1 1 100%;
position: relative;
@if $theme-light {
@if $theme == 'transp' {
background: fade-out($c-bg-box, .3);
} @elseif $theme-light {
background: $c-bg-zebra url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMy41MjkgMzMuNTA0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNS4yNS02LjI0NikiIG9wYWNpdHk9Ii4xIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxnIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Im0yMiAxMGMxMC41IDEgMTYuNSA4IDE2IDI5aC0yM2MwLTkgMTAtNi41IDgtMjEiLz48cGF0aCBkPSJtMjQgMThjLjM4IDIuOTEtNS41NSA3LjM3LTggOS0zIDItMi44MiA0LjM0LTUgNC0xLjA0Mi0uOTQgMS40MS0zLjA0IDAtMy0xIDAgLjE5IDEuMjMtMSAyLTEgMC00IDEtNC00IDAtMiA2LTEyIDYtMTIgMCAwIDEuODktMS45IDItMy41LS43My0uOTk0LS41LTItLjUtMyAxLTEgMyAyLjUgMyAyLjVoMmMwIDAgLjc4LTEuOTkyIDIuNS0zIDEgMCAxIDMgMSAzIi8+PC9nPjxnIGZpbGw9IiMwMDAiPjxwYXRoIGQ9Im05LjUgMjUuNWEuNSAuNSAwIDEgMSAtMSAwIC41IC41IDAgMSAxIDEgMHoiLz48cGF0aCBkPSJtMTUgMTUuNWEuNSAxLjUgMCAxIDEgLTEgMCAuNSAxLjUgMCAxIDEgMSAweiIgdHJhbnNmb3JtPSJtYXRyaXgoLjg2Ni41LS41Ljg2NiA5LjY5My01LjE3MykiLz48L2c+PC9nPjwvc3ZnPg==');
} @else {
} @elseif $theme-dark {
background: $c-bg-zebra url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMy41MjkgMzMuNTA0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNS4yNS02LjI0NikiIG9wYWNpdHk9Ii4xIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiPjxnIGZpbGw9IiMwMDAiPjxwYXRoIGQ9Im0yMiAxMGMxMC41IDEgMTYuNSA4IDE2IDI5aC0yM2MwLTkgMTAtNi41IDgtMjEiLz48cGF0aCBkPSJtMjQgMThjLjM4IDIuOTEtNS41NSA3LjM3LTggOS0zIDItMi44MiA0LjM0LTUgNC0xLjA0Mi0uOTQgMS40MS0zLjA0IDAtMy0xIDAgLjE5IDEuMjMtMSAyLTEgMC00IDEtNC00IDAtMiA2LTEyIDYtMTIgMCAwIDEuODktMS45IDItMy41LS43My0uOTk0LS41LTItLjUtMyAxLTEgMyAyLjUgMyAyLjVoMmMwIDAgLjc4LTEuOTkyIDIuNS0zIDEgMCAxIDMgMSAzIi8+PC9nPjxnIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Im05LjUgMjUuNWEuNSAuNSAwIDEgMSAtMSAwIC41IC41IDAgMSAxIDEgMHoiLz48cGF0aCBkPSJtMTUgMTUuNWEuNSAxLjUgMCAxIDEgLTEgMCAuNSAxLjUgMCAxIDEgMSAweiIgdHJhbnNmb3JtPSJtYXRyaXgoLjg2Ni41LS41Ljg2NiA5LjY5My01LjE3MykiLz48L2c+PC9nPjwvc3ZnPg==');
}
background-size: 100% 100%;

1
ui/lobby/css/app/_pool.scss
View File

@ -18,6 +18,7 @@
// height: 31%;
cursor: pointer;
background: fade-out($c-bg-box, .5);
color: $c-font-page;
transition: background .15s, opacity 0.7s;
&:hover {
background: fade-out($c-accent, .8);

1
ui/lobby/css/app/_tab.scss
View File

@ -13,6 +13,7 @@
padding: 0 .1em;
cursor: pointer;
position: relative;
color: $c-font-page;
@include transition(color, .25s);
&::after {
content: "";