Sélectionner une révision Git
Bifurcation depuis
Loris TICHADOU / nardco
Le projet source a une visibilité limitée.
app.sass 21,27 Kio
@import "bower_components/bourbon/app/assets/stylesheets/bourbon"
@import "bower_components/neat/app/assets/stylesheets/neat"
@import "bower_components/normalize.css/normalize"
@import "bower_components/datedropper/datedropper"
@import "bower_components/pace/themes/blue/pace-theme-minimal"
@include font-face('wire','/assets/fonts/Electro')//string_and_wire
@include font-face('marker','/assets/fonts/twin_marker') //colors_of_autumn')
$standard_font: 'Helvetica Neue',Helvetica,Arial,sans-serif
$standard_color: #333 //#4285f4
$standard_light_color: #474747
$standard_font_color: transparentize(white, 0.3)
$standard_secondary_color: #2098d1
html
font-family: $standard_font
font-size: 90% //82.5%
li
list-style: none
ul
margin: 0
padding: 0
a
text-decoration: none
.everything
opacity: 1
@include transition(opacity 0.5s ease)
.preload //.pace-running
height: 100vh
width: 100vw
//position: fixed
z-index: 9999
//top: 0
background: url('/assets/images/Nightiies.png') no-repeat center center
background-size: 50vh
.everything
opacity: 0
.everything
@include display(flex)
overflow: hidden
//height: 100vh
//width: 100vw
// -------------------------------------------------
// New menu
.menu-button
$hover_color: lighten($standard_secondary_color, 10%)
width: 36px//60px
height: 36px//60px
outline: none
position: fixed
margin: 5px
padding: 0px //8px 9px 9px 9px //14px 15px 15px 15px
z-index: 999996
border: 2px solid $standard_secondary_color
border-radius: 50%
box-sizing: content-box
background: none //rgba(255,255,255,0.5)
&:hover, &:focus
border: 3px solid $hover_color
margin: 4px
i
color: $hover_color
//@include transition(all 0.1s ease)
i
font-size: 21px //30px
color: $standard_secondary_color
.menu
$action-color: #477DCA !default
$dark-gray: #333 !default
$sliding-panel-border-color: $dark-gray
$sliding-panel-background: lighten($sliding-panel-border-color, 5%)
$sliding-panel-color: #fff
$sliding-panel-border: 1px solid $sliding-panel-border-color
$sliding-panel-background-hover: $action-color
$sliding-panel-color-hover: #fff
$sliding-panel-background-focus: lighten($sliding-panel-background, 5%)
@include position(fixed)
@include transform(translateY(-60px)) //X(-160px))
@include transition(all 0.25s linear)
background: $standard_color //$sliding-panel-background
z-index: 999998
width: 100%
li a
@include span-columns(1.5)
height: 50px
border-right: 1px solid #2e2e2e //border-bottom $sliding-panel-border
color: $sliding-panel-color
display: block
font-size: 1.1em
padding: 1em
text-decoration: none
overflow: hidden
//text-overflow: ellipsis
white-space: nowrap
@media screen and (max-device-width: 640px), screen and (max-width: 800px)
@include span-columns(2.6)
//span
display: none
&:focus, &.active
background-color: $standard_light_color //$sliding-panel-background-focus
&:hover
background-color: $sliding-panel-background-hover
color: $sliding-panel-color-hover
&.is-visible
@include transform(translateY(0))
.fade-menu
@include position(fixed, 0px 0px 0px 0px)
@include transition
background: black
opacity: 0
visibility: hidden
z-index: 999997
&.is-visible
opacity: 0.4
visibility: visible
// Track player
@mixin grid-item-columns($columns)
width: (100% / 12) * $columns
.player
@include flex-grow(0)
@include flex-shrink(0)
background-color: #474747 //$standard_color
ul
@include clearfix
@include row(table)
li
@include span-columns(1)
color: $standard_font_color
white-space: nowrap
overflow: hidden
vertical-align: middle
li.track_name
@include span-columns(6)
overflow: hidden
text-overflow: ellipsis
padding-left: 50px
//div
&:focus, &:hover
@include animation(scroll 5s ease infinite)
//@include keyframes(scroll)
from
@include transform(translateX(0%))
to
@include transform(translateX(-100%))
li.track_player
@include span-columns(6)
//width: 640px
line-height: 0px
height: 35px
iframe
display: inline-block
.tracks-colorGrid
width: 100%
margin-right: calc(100% - 100Vw)
@include display(flex)
@include flex-direction(row)
@include flex-wrap(wrap)
@include align-content(flex-start)
@include justify-content(stretch)
@include align-items(stretch)
//height: 100vh
$base-accent-color: #477DCA !default
$base-background-color: white !default
p
line-height: 1.5em
a
text-decoration: none
$grid-items-background: $base-background-color
$grid-item-background: desaturate($base-accent-color, 30%)
$grid-item-colors: desaturate($base-accent-color, 30%), #3581A5, #F7C808, #5FBEBE, #98C79A, #D2315D, #A7A891, #389090, #F47E7D, #B5D045, #FB8335, #81C0C5, #E98813, #22B5BF, #8767A6, #88C134
.grid-item
@include flex-grow(1)
@include align-items(center)
@include justify-content(center)
@include flex-basis(500px)
@include transition (all 0.2s ease-in-out)
background: $grid-item-background
margin: 2px
cursor: pointer
padding: 2em
@extend .hvr-trim
@for $i from 1 through 51 //length($grid-item-colors)
&:nth-child(#{$i})
$background-from-list: nth($grid-item-colors, $i % 16 + 1)
$background-color: transparentize($background-from-list, 0.8)
background-color: $background-color
&:focus, &:hover, &.active
background-color: transparentize($background-from-list, 0.4)
//@extend .hvr-trim
.grid-item p
margin: auto
color: #595959 //rgb(180,180,180)
span.track_author
float: left
span.track_channel
float: right
span.track_name
font-size: 1.1em
color: black
.pagination
@include flex-grow(1)
width: 100vw
margin: 1em
.tracks-table
width: 100% //100vw
margin-right: calc(100% - 100vw)
$base-border-color: gainsboro !default
$base-background-color: white !default
$base-line-height: 1.5em !default
$dark-gray: #333 !default
$base-font-color: $dark-gray !default
//background: url(records_edited.jpg)
//background-size: cover
//background-position: bottom
td
line-height: $base-line-height
$table-border-color: $base-border-color
$table-border: 1px solid $table-border-color
$table-background: $base-background-color
$table-hover-background: darken($table-background, 3)
$table-padding: 0.8em 1em
$table-font-light: rgba(0,0,0,0.6)
border-collapse: collapse//separate //collapse
border-spacing: 0
tbody
//background-color: $table-background
tr:hover > td, tr.active > td
background-color: $table-hover-background
//border-color: $standard_secondary_color
//border-bottom: 1px solid $standard_secondary_color
color: $standard_secondary_color
//tr:last-child td
border-bottom: 0px
td
border-bottom: 0px
border-top: 1px solid $table-border-color
padding: $table-padding
overflow: hidden
td.track_author
@include span-columns(2)
td.track_name
@include span-columns(6)
td.track_tags
@include span-columns(2)
td.track_channel
@include span-columns(2)
td
a
color: gray //$table-font-light
.menu-placeholder
display: inline-block
height: 50px //70px
width: 50px //70px
.filters-menu
@include flex-grow(0)
@include flex-shrink(0)
//$filter_color: #474747
background-color: $standard_color//$filter_color
color: $standard_font_color
white-space: nowrap
li
height: 50px //70px
select
background: $standard_color//$filter_color
border: none
outline: none
cursor: pointer
color: $standard_font_color
@include span-columns(2 of 4)
height: 25px //35px
//@include appearance(none)
option
width: 100px
color: $standard_font_color
&:hover, &:focus
color: $standard_secondary_color
input
@include span-columns(2 of 4)
height: 25px //35px
background: $standard_color //$filter_color
border: none
outline: none
color: $standard_font_color
&:hover, &:focus
color: $standard_secondary_color
@include placeholder
color: $standard_secondary_color
ul
display: inline-block
li
@include span-columns(4)
height: 25px //35px
.first-line
position: relative
top: -25px//-35px
.second-line
position: relative
left: -50%
.design
font-size: 2em
line-height: 50px //70px
float: right
padding: 0 10px
cursor: pointer
vertical-align: middle
&:hover, &.active
color: #2098d1
.pagination
margin: 1em
//margin-bottom: 2em
$base-border-color: gainsboro !default
$base-border-radius: 3px !default
$base-spacing: 1.5em !default
$base-accent-color: #477DCA !default
$base-link-color: $base-accent-color !default
$dark-gray: #333 !default
$large-screen: em(860) !default
$base-font-color: $dark-gray !default
$pagination-border-color: $base-border-color
$pagination-border: 1px solid $pagination-border-color
$pagination-background: lighten($pagination-border-color, 10)
$pagination-hover-background: lighten($pagination-background, 5)
$pagination-color: $base-font-color
text-align: center
ul
display: inline
text-align: center
li
display: inline
ul li
display: none
&:nth-child(1),
&:nth-child(2),
&:nth-child(3)
display: inline
@include media($large-screen)
display: inline
li a
@include transition (all 0.2s ease-in-out)
background: $pagination-background
border-radius: $base-border-radius
border: $pagination-border
color: $pagination-color
outline: none
padding: ($base-spacing / 4) ($gutter / 2)
&:hover, &:focus
background: $pagination-hover-background
color: $base-link-color
a.current
background: $pagination-hover-background
.tracks
@include display(flex)
@include flex-grow(1)
@include flex-basis(200px)
@include flex-direction(column)
@include flex-wrap(nowrap)
@include justify-content(flex-start)
.presentation
height: 100vh
@include display(flex)
@include flex-grow(1)
@include flex-basis(200px)
background: url('/assets/images/vinyl_prog.jpg')
background-size: cover
background-position: bottom
.abstract
color: white
margin: auto
//padding: 3.5em
text-align: center
a
font-family: wire
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black
@include filter(drop-shadow(1px 1px 1px rgba(0,0,0,0.9)))
font-size: 7em
font-weight: bold
color: #2098d1 //white
img
height: 30vh //10em
margin-bottom: 1em
p
text-align: center
font-size: 1em
margin-bottom: 0.5em
.channels, .users
@include display(flex)
@include flex-direction(row)
@include flex-wrap(wrap)
@include flex-grow(1)
@include flex-basis(200px)
@include align-content(stretch)
@include justify-content(stretch)
@include align-items(stretch)
height: 100vh
$base-accent-color: #477DCA !default
$channel-colors: desaturate($base-accent-color, 30%), #F7C808, #3581A5, #5FBEBE, #98C79A, #D2315D, #A7A891, #389090, #F47E7D, #B5D045, #FB8335, #81C0C5, #E98813, #22B5BF, #8767A6, #88C134
//#E0C7A8,#BDCC97,#979EA0,
@include clearfix
.hided
color: transparent
.channel, .user
@include display(flex)
@include flex-grow(1)
@include align-items(center)
@include justify-content(center)
@include transition (all 0.2s ease-in-out)
//border-radius: 50%
cursor: pointer
overflow: hidden
//@include ellipsis()
white-space: nowrap
@for $i from 1 to 200//through 51 //length($grid-item-colors)
&:nth-child(#{$i})
$background-from-list: nth($channel-colors, $i % 16 + 1)
$background-color: transparentize($background-from-list, 0.8)
background-color: $background-color
&:focus, &:hover
background-color: transparentize($background-from-list, 0.4)
min-width: 150px
color: black
// -------------------------------------------------------------
// Design for pace plugin
//--------------------------------------------------------------
//I copy paste here the styles that I need from hover.css
/* Trim */
.hvr-trim
display: inline-block
vertical-align: middle
@include transform(translateZ(0))
box-shadow: 0 0 1px rgba(0, 0, 0, 0)
-webkit-backface-visibility: hidden
backface-visibility: hidden
-moz-osx-font-smoothing: grayscale
position: relative
&:before
content: ''
position: absolute
border: white solid 4px
top: 4px
left: 4px
right: 4px
bottom: 4px
opacity: 0
@include transition (opacity 0.3s)
&:hover:before, &:focus:before, &:active:before, &.active:before
opacity: 1
// ---------------------------------------------------------------------------
// Cassette design
.cassette
background-image: url("/assets/images/cassette/mixtable_bw.jpg")
background-size: cover
background-position: center
height: 100vh
width: 100vw
iframe.cassette
width: 0px
height: 0px
visibility: hidden
border: none
/* Main container */
.cassette-holder
/* Tape elements */
.tape
width: 586px
height: 379px
margin: auto //30px auto 0
position: relative
@include transition(all .4s ease-in-out)
//INFO
overflow: hidden
&:hover
.cassette-back, .cassette-front
@include filter(blur(3px) grayscale(90%))
@include transition(all, 0.5s ease-in-out)
//opacity: 0.9
.info-hover
@include transform(translate(0, -200%))
.info-hover
padding: 1em 2em
@include transition(all, 0.5s ease-in-out)
background: transparentize(#000, 0.7)
height: inherit
width: inherit
overflow: hidden
color: rgba(255, 255, 255, 0.7)
.vc-loader
position: absolute
width: 31px
height: 31px
bottom: 50px
left: 50%
margin: -15px 0 0 -15px
background: transparent url(images/cassette/ajax-loader.gif) no-repeat center center
display: none
.cassette-back
width: 100%
height: 100%
position: relative
background: transparent url(images/cassette/cs_back.png) no-repeat center center //DESIGN
.wheels
width: 125px
height: 125px
position: absolute
top: 110px
background: transparent
border-radius: 50%
.left-wheel
left: 109px
box-shadow: 0 0 0 70px #000
.right-wheel
right: 113px //109px DESIGN
//@include animation(scroll 5s ease infinite)
@include keyframes(rotateLeft)
from
@include transform(rotate(0deg) translateZ(-1px))
to
@include transform(rotate(-360deg) translateZ(-1px))
@include keyframes(rotateRight)
from
@include transform(rotate(0deg) translateZ(-1px))
to
@include transform(rotate(360deg) translateZ(-1px))
.wheels div
width: 100%
height: 100%
background: transparent url(/assets/images/cassette/cs_wheel.png) no-repeat center center
.spin
@include animation(rotateLeft 2s linear infinite forwards)
.cassette-front
width: 100%
height: 100%
background: url(/assets/images/cassette/cs_front.png) no-repeat center center //transparent url(images/cassette/cassette_reduced_v4.png) no-repeat center
//top: 0px
//left: 0px
position: relative
top: -379px
span
color: rgba(0, 0, 0, 0.7)
position: absolute
top: 83px
left: 67px
font-family: Arial
font-weight: bold
font-size: 20px
.tape-name
position: absolute
top: 51px //60px DESIGN
left: 100px //90px DESIGN
font-family: marker
font-size: 25px
width: 370px //450px DESIGN
margin: 0
text-indent: 90px //DESIGN
//Second design try DESIGN
//text-align: left
//overflow: hidden
//white-space: nowrap
//text-overflow: ellipsis
/* Controls list */
ul.vc-controls
margin: 0 auto//10px auto DESIGN
height: 70px
width: 460px //440px
@include background(linear-gradient(top, rgba(170,170,170,0.35) 0%, rgba(255,255,255,0.44) 50%, rgba(255,255,255,0.53) 100%))
border: 1px solid rgba(0,0,0,0.1)
border-bottom-color: rgba(255,255,255,0.6)
padding: 8px
box-shadow: inset 0 1px 0px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.8), 0 -1px 0 rgba(255,255,255,0.4), inset 0 2px 19px rgba(0,0,0,0.05), 0 2px 1px rgba(0,0,0,0.06)
//@mixin box-sizing(content-box)
border-radius: 12px
/* Controls list items */
ul.vc-controls li
display: block
float: left
width: 80px
height: 50px
line-height: 55px
text-align: left
padding: 10px
margin: 0
cursor: pointer
background: #ddd url(/assets/images/cassette/metal.jpg) no-repeat center top
box-shadow: inset 0 0 0 1px rgba(0,0,0, 0.2), inset 0 0 1px 2px rgba(255,255,255,0.9), inset 0 -6px 5px rgba(0,0,0,0.1), 0 6px 7px rgba(0,0,0,0.3), 0 4px 1px rgba(0,0,0,0.5)
@include user-select(none)
ul.vc-controls li:first-child
border-radius: 8px 0 0 8px
ul.vc-controls li:last-child
border-radius: 0px 8px 8px 0px
ul.vc-controls li.vc-control-play
width: 120px
/* Control icons */
ul.vc-controls li span:before
font-size: 16px
line-height: 50px
text-align: center
float: left
color: #444
font-family: 'playericons'
text-shadow: 1px 1px 1px rgba(255,255,255,0.9)
font-style: normal
font-weight: normal
text-transform: none
speak: none
display: inline-block
text-decoration: inherit
width: 1em
margin-right: 0.2em
text-align: center
li.vc-control-volume-off span:before
content: '🔇'
li.vc-control-volume-down span:before
content: '🔉'
li.vc-control-volume-up span:before
content: '🔊'
ul.vc-controls li:hover
box-shadow: inset 0 0 0 1px rgba(0,0,0, 0.2), inset 0 0 1px 2px rgba(255,255,255,0.9), inset 0 -10px 15px rgba(0,0,0,0.1), 0 6px 7px rgba(0,0,0,0.3), 0 4px 1px rgba(0,0,0,0.5)
/* Pressed (active) */
ul.vc-controls li.vc-control-active
height: 50px
margin-top: 2px
background-image: url(/assets/images/cassette/metal_dark.jpg)
box-shadow: inset 0 0 0 1px rgba(0,0,0, 0.18), inset 0 0 1px 2px rgba(255,255,255,0.5), inset 0 -6px 5px rgba(0,0,0,0.1), 0 6px 7px rgba(0,0,0,0.3), 0 2px 1px rgba(0,0,0,0.5)
/* Activated */
ul.vc-controls li.vc-control-pressed,
ul.vc-controls li.vc-control-active.vc-control-pressed
height: 50px
background-image: url(/assets/images/cassette/metal_dark.jpg)
margin-top: 4px
box-shadow: inset 0 0 0 1px rgba(0,0,0, 0.2), inset 0 0 5px 1px rgba(255,255,255,0.5), inset 0 -10px 15px rgba(0,0,0,0.2), 0 7px 5px rgba(255,255,255,0.5)
//Background for the volume knob
//See knobKnob.css for the knob style
.vc-volume-wrap
display: none
width: 118px
height: 118px
position: absolute
bottom: 0px
left: 50%
margin-left: -318px
@include background(linear-gradient(top, rgba(170,170,170,0.35) 0%, rgba(255,255,255,0.44) 50%, rgba(255,255,255,0.53) 100%))
border: 1px solid rgba(0,0,0,0.1)
border-radius: 50%
padding: 8px
box-shadow: inset 0 1px 0px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.6), 0 -1px 0 rgba(255,255,255,0.4), inset 0 2px 19px rgba(0,0,0,0.05), 0 2px 1px rgba(0,0,0,0.06)
//@mixin box-sizing(content-box)
.vc-volume-wrap:after
content: 'Volume'
margin-top: 15px
display: block
/* Text style for controls */
ul.vc-controls li,
.vc-volume-wrap:after
font-family: 'Aldrich'
font-size: 10px
font-weight: 300
text-transform: uppercase
letter-spacing: 1px
color: #666
text-shadow: 0 1px 1px rgba(255,255,255,0.8)
// About css
.about
overflow-x: hidden
.flex-boxes
height: 100vh
$base-border-radius: 3px !default
$base-background-color: white !default
$dark-gray: #333 !default
$light-gray: #DDD !default
$base-font-color: $dark-gray !default
$flex-box-border-color: $light-gray
$flex-box-border: 1px solid $flex-box-border-color
$flex-box-background: lighten($light-gray, 10%)
$flex-box-width: 18em
$flex-box-color: transparentize($base-font-color, 0.3)
$flex-box-top-colors: tomato, #72BFBF, #92B1E3, #E3D743, #CCC, #F6C05C
//@include clearfix
@include display(flex)
@include justify-content(center)
@include align-items(stretch)
@include align-content(stretch)
@include flex-wrap(wrap)
@include flex-direction(row)
text-align: center
.flex-box
@include transition (all 0.2s ease-in-out)
@include flex(1 0 30em)
background: $flex-box-background
border-radius: $base-border-radius
box-shadow: inset 0 0 1px $flex-box-border-color, 0 2px 4px darken($base-background-color, 10%)
margin: 5px
padding: 2em 2em 3em 2em
@for $i from 1 to 7
// assign colors from $flex-box-top-colors list
&:nth-child(#{$i})
$color-from-list: nth($flex-box-top-colors, $i)
border-top: 6px solid $color-from-list
&:focus, &:hover
background-color: transparentize($color-from-list, 0.9)
img, .icon
color: $flex-box-color
font-size: 4em
opacity: 0.4
.flex-title
color: $flex-box-color
font-size: 1.2em
font-weight: 800
margin-bottom: 0.5em
p
color: transparentize($flex-box-color, 0.1)
line-height: 1.3em
margin: auto
text-align: justify
.flex-box.flex-box-big
@include flex(2 0 40em)