PrivateCoffee/alltube
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

csslint

Browse source
This commit is contained in:
Pierre Rudloff 2017-06-01 01:38:35 +02:00
parent bbee27caa9
commit 393255180c
3 changed files with 334 additions and 346 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
Gruntfile.js
View file

@ -101,6 +101,11 @@ module.exports = function (grunt) {
'i18n/zh_CN/LC_MESSAGES/Alltube.mo': 'i18n/zh_CN/LC_MESSAGES/Alltube.po' 'i18n/zh_CN/LC_MESSAGES/Alltube.mo': 'i18n/zh_CN/LC_MESSAGES/Alltube.po'
} }
} }
},
csslint: {
css: {
src: 'css/*'
}
} }
} }
); );
@ -117,9 +122,10 @@ module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-jsonlint'); grunt.loadNpmTasks('grunt-jsonlint');
grunt.loadNpmTasks('grunt-fixpack'); grunt.loadNpmTasks('grunt-fixpack');
grunt.loadNpmTasks('grunt-potomo'); grunt.loadNpmTasks('grunt-potomo');
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.registerTask('default', ['uglify', 'cssmin', 'potomo']); grunt.registerTask('default', ['uglify', 'cssmin', 'potomo']);
grunt.registerTask('lint', ['jslint', 'fixpack', 'jsonlint', 'phpcs']); grunt.registerTask('lint', ['jslint', 'csslint', 'fixpack', 'jsonlint', 'phpcs']);
grunt.registerTask('test', ['phpunit']); grunt.registerTask('test', ['phpunit']);
grunt.registerTask('doc', ['phpdocumentor']); grunt.registerTask('doc', ['phpdocumentor']);
grunt.registerTask('release', ['default', 'githash', 'compress']); grunt.registerTask('release', ['default', 'githash', 'compress']);

671
css/style.css
View file

@ -1,10 +1,10 @@
body { body {
text-align:center;
background-color: #EBEBEB; background-color: #EBEBEB;
background-image:url('../img/fond.jpg'); background-image:url('../img/fond.jpg');
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-weight:400; font-weight:400;
text-align:center;
} }
@ -12,90 +12,90 @@ body {
/************************HEADER******************************/ /************************HEADER******************************/
header { header {
position:absolute;
top:0;
text-align:right;
width:100%;
padding:0; padding:0;
} position:absolute;
text-align:right;
top:0;
width:100%;
}
.social .social {
{padding-right:21px;} padding-right:21px;
}
header .social a header .social a {
{ background-position:0 0;
overflow:hidden; background-repeat:no-repeat;
height:38px; float:right;
width:38px; height:38px;
position:relative; margin-left:13px;
float:right; margin-right:0;
margin-top:13px; margin-top:13px;
margin-left:13px; overflow:hidden;
margin-right:0; position:relative;
background-position:0 0; -webkit-transition: all 0.1s ease-in;
background-repeat:no-repeat; -moz-transition: all 0.1s ease-in;
-webkit-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in; width:38px;
-o-transition: all 0.1s ease-in;
} }
header a:focus, header a:focus,
header a:hover header a:hover {
{
outline:none;
background-position:0 100%; background-position:0 100%;
-webkit-transition: all 0.1s ease-in; outline:none;
-moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
} }
.share .share {
{background-image:url('../img/share.png');} background-image:url('../img/share.png');
.sharemask
{
height:38px;
width:38px;
position:absolute;
top:0;
left:0;
z-index:10;
background-image:url('../img/sharemask.png');
background-position:top left;
background-repeat:no-repeat;
} }
.facebook .sharemask {
{background-image:url('../img/facebook.png');} background-image:url('../img/sharemask.png');
background-position:top left;
background-repeat:no-repeat;
height:38px;
left:0;
position:absolute;
top:0;
width:38px;
z-index:10;
.facebookmask
{
height:38px;
width:38px;
position:absolute;
top:0;
left:0;
z-index:10;
background-image:url('../img/facebookmask.png');
background-position:top left;
background-repeat:no-repeat;
} }
.twitter .facebook {
{background-image:url('../img/twitter.png');} background-image:url('../img/facebook.png');
}
.twittermask .facebookmask {
{ background-image:url('../img/facebookmask.png');
height:38px; background-position:top left;
width:38px; background-repeat:no-repeat;
position:absolute; height:38px;
top:0; left:0;
left:0; position:absolute;
z-index:10; top:0;
background-image:url('../img/twittermask.png'); width:38px;
background-position:top left; z-index:10;
background-repeat:no-repeat; }
.twitter {
background-image:url('../img/twitter.png');
}
.twittermask {
background-image:url('../img/twittermask.png');
background-position:top left;
background-repeat:no-repeat;
height:38px;
left:0;
position:absolute;
top:0;
width:38px;
z-index:10;
} }
@ -104,16 +104,16 @@ background-repeat:no-repeat;
footer { footer {
position:fixed;
bottom:0;
text-align:center;
width:100%;
background-image:url('../img/fondfooter.png'); background-image:url('../img/fondfooter.png');
background-repeat:repeat-x;
background-position:top left; background-position:top left;
padding-top:20px; background-repeat:repeat-x;
bottom:0;
color:#adadad; color:#adadad;
font-size:12px; font-size:12px;
padding-top:20px;
position:fixed;
text-align:center;
width:100%;
z-index:11; z-index:11;
} }
@ -123,20 +123,19 @@ footer {
footer a{ footer a{
color:#adadad; color:#adadad;
-webkit-transition: all 0.1s ease-in; text-decoration:none;
-moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in;
text-decoration:none; -o-transition: all 0.1s ease-in;
} }
footer a:focus, footer a:focus,
footer a:hover footer a:hover {
{ color:#f2084a;
outline:none; outline:none;
color:#f2084a; -webkit-transition: all 0.1s ease-in;
-webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
} }
@ -150,46 +149,42 @@ color:#f2084a;
padding-bottom:55px; padding-bottom:55px;
} }
.labelurl .labelurl {
{ color:#3f3f3f;
position:relative; font-size:19px;
color:#3f3f3f; position:relative;
font-size:19px;
} }
.champs .champs {
{ margin-bottom:70px;
position:relative; margin-top:8px;
margin-bottom:70px; position:relative;
margin-top:8px;
} }
.downloadBtn { .downloadBtn {
position:relative;
background-color:#3A3A3A; background-color:#3A3A3A;
border: 3px solid #a5a5a5; border: 3px solid #a5a5a5;
color:#dedede;
border-radius:10px; border-radius:10px;
padding: 12px 14px; color:#dedede;
cursor:pointer;
display:inline-block;
font-size:24px; font-size:24px;
font-weight:800; font-weight:800;
cursor:pointer; padding: 12px 14px;
position:relative;
text-decoration:none;
-webkit-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
text-decoration:none;
display:inline-block;
} }
.downloadBtn:focus, .downloadBtn:focus,
.downloadBtn:hover .downloadBtn:hover {
{
outline:none;
background-color:#f2084a; background-color:#f2084a;
-webkit-transition: all 0.1s ease-in; outline:none;
-moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
} }
.downloadBtn::-moz-focus-inner { .downloadBtn::-moz-focus-inner {
@ -197,22 +192,22 @@ margin-top:8px;
} }
.URLinput{ .URLinput{
position:relative;
background-color:#fff; background-color:#fff;
border: 3px solid #a5a5a5; border: 3px solid #a5a5a5;
color:#3F3F3F;
border-radius:10px; border-radius:10px;
padding: 12px 12px 12px 12px; color:#3F3F3F;
min-width:426px;
font-size:24px; font-size:24px;
font-weight:800; font-weight:800;
margin-right:8px; margin-right:8px;
min-width:426px;
padding: 12px 12px 12px 12px;
position:relative;
} }
.URLinput:focus { .URLinput:focus {
outline: none;
border-color:#3A3A3A; border-color:#3A3A3A;
outline: none;
} }
.URLinput:-webkit-input-placeholder{ .URLinput:-webkit-input-placeholder{
@ -223,176 +218,167 @@ margin-top:8px;
} }
.combatiblelink { .combatiblelink {
position:relative; background-image:url('../img/compatiblerouage.png');
color:#a5a5a5; background-position:0 100%;
font-size:13px; background-repeat:no-repeat;
z-index:10; color:#a5a5a5;
text-decoration:none; font-size:13px;
background-image:url('../img/compatiblerouage.png'); padding-bottom:10px;
background-position:0 100%; padding-left:41px;
background-repeat:no-repeat; padding-top:10px;
padding-left:41px; position:relative;
padding-top:10px; text-decoration:none;
padding-bottom:10px; -webkit-transition: all 0.1s ease-in;
-webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in; z-index:10;
} }
.combatiblelink:focus, .combatiblelink:focus,
.combatiblelink:hover .combatiblelink:hover {
{ background-position:0 0;
color:#f2084a;
outline:none; outline:none;
background-position:0 0; -webkit-transition: all 0.1s ease-in;
color:#f2084a; -moz-transition: all 0.1s ease-in;
-webkit-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
} }
#bookmarklet{ .bookmarklet {
padding:15px; border: 2px dotted;
} color:gray;
font-size:13px;
.bookmarklet{ padding:10px 30px;
position:relative;
font-size:13px;
color:gray;
z-index:10;
text-decoration:none;
padding-left:30px;
padding-right:30px;
padding-top:10px;
padding-bottom:10px;
border: 2px dotted;
}
.mp3
{
position:relative; position:relative;
text-decoration:none;
z-index:10;
}
.mp3 {
background-color:#cecece; background-color:#cecece;
color:#696969;
border-radius:6px; border-radius:6px;
width:622px; color:#696969;
font-size:14px; font-size:14px;
font-weight:300;
height:26px; height:26px;
margin-top:12px; margin-top:12px;
position:relative;
text-align:left; text-align:left;
font-weight:300; width:622px;
} }
.mp3 p .mp3 p {
{ padding:3px;
padding:3px;
} }
/* .audio:not(:checked),
Demo CSS code .audio:checked {
*/ left: -9999px;
position: absolute;
}
.audio:not(:checked) + label,
.audio:checked + label {
cursor: pointer;
line-height:22px;
padding-left: 82px;
position: relative;
}
.audio:not(:checked) + label:before,
.audio:checked + label:before,
.audio:not(:checked) + label:after,
.audio:checked + label:after {
content: '';
position: absolute;
}
.audio:not(:checked) + label:before,
.audio:checked + label:before {
background: #ffffff;
border-radius: 6px;
height: 20px;
left:0;
top: -1px;
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
-ms-transition: background-color .2s;
-o-transition: background-color .2s;
transition: background-color .2s;
width: 45px;
}
.audio:not(:checked) + label:after,
.audio:checked + label:after {
background: #3a3a3a;
border-radius: 6px;
height: 16px;
left: 2px;
top: 1px;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
width: 16px;
}
.audio:not(:checked), .audio:focus + label {
.audio:checked { color:black;
position: absolute; }
left: -9999px;
}
.audio:not(:checked) + label,
.audio:checked + label {
position: relative;
padding-left: 82px;
cursor: pointer;
line-height:22px;
}
.audio:not(:checked) + label:before,
.audio:checked + label:before,
.audio:not(:checked) + label:after,
.audio:checked + label:after {
content: '';
position: absolute;
}
.audio:not(:checked) + label:before,
.audio:checked + label:before {
left:0; top: -1px;
width: 45px; height: 20px;
background: #ffffff;
border-radius: 6px;
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
-ms-transition: background-color .2s;
-o-transition: background-color .2s;
transition: background-color .2s;
}
.audio:not(:checked) + label:after,
.audio:checked + label:after {
width: 16px; height: 16px;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
border-radius: 6px;
background: #3a3a3a;
top: 1px; left: 2px;
}
.audio:focus + label { /* on checked */
color:black; .audio:checked + label:before {
} background:#f2084a;
}
.audio:checked + label:after {
background: #fff;
left: 27px;
top: 1px;
}
/* on checked */ .audio:checked + label .ui,
.audio:checked + label:before { .audio:not(:checked) + label .ui:before,
background:#f2084a; .audio:checked + label .ui:after {
} border-radius: 15px;
.audio:checked + label:after { font-size: 11px;
background: #fff; font-weight: bold;
top: 1px; left: 27px; height:20px;
} left: 3px;
line-height: 17px;
.audio:checked + label .ui, position: absolute;
.audio:not(:checked) + label .ui:before, -webkit-transition: all .2s;
.audio:checked + label .ui:after { -moz-transition: all .2s;
position: absolute; -ms-transition: all .2s;
left: 3px; -o-transition: all .2s;
width: 45px; transition: all .2s;
border-radius: 15px; width: 45px;
font-size: 11px; }
font-weight: bold; .audio:not(:checked) + label .ui:before {
line-height: 17px; background-image:url('../img/mp3hover.png');
height:20px; background-position:right top;
-webkit-transition: all .2s; background-repeat:no-repeat;
-moz-transition: all .2s; content: "no";
-ms-transition: all .2s; left: 0;
-o-transition: all .2s; padding-left:23px;
transition: all .2s; padding-top:2px;
} -webkit-transition: all .2s;
.audio:not(:checked) + label .ui:before { -moz-transition: all .2s;
content: "no"; -ms-transition: all .2s;
left: 0; -o-transition: all .2s;
padding-left:23px; transition: all .2s;
padding-top:2px; width:56px;
background-image:url('../img/mp3hover.png'); }
background-repeat:no-repeat; .audio:checked + label .ui:after {
background-position:right top; background-image:url('../img/mp3.png');
width:56px; background-position:right top;
-webkit-transition: all .2s; background-repeat:no-repeat;
-moz-transition: all .2s; color: #fff;
-ms-transition: all .2s; content: "yes";
-o-transition: all .2s; -webkit-transition: all .2s;
transition: all .2s; -moz-transition: all .2s;
} -ms-transition: all .2s;
.audio:checked + label .ui:after { -o-transition: all .2s;
content: "yes"; transition: all .2s;
color: #fff; width:73px;
background-image:url('../img/mp3.png'); }
background-repeat:no-repeat;
background-position:right top;
width:73px;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
@ -423,8 +409,8 @@ padding:3px;
} }
.playlist-entry .downloadBtn { .playlist-entry .downloadBtn {
font-size: 16px;
border-width: 2px; border-width: 2px;
font-size: 16px;
} }
@ -432,98 +418,93 @@ padding:3px;
/*************************CONTENT COMPATIBLES****************************/ /*************************CONTENT COMPATIBLES****************************/
.logobis .logobis {
{ height:107px;
width:447px; margin:0 auto 10px auto;
height:107px; position:relative;
position:relative; width:447px;
margin:0 auto 10px auto;
} }
.logocompatible .logocompatible {
{ background-image:url('../img/logocompatible.png');
width:447px; background-position:0 0;
height:107px; background-repeat:repeat-y;
background-image:url('../img/logocompatible.png'); display:block;
background-repeat:repeat-y; height:107px;
background-position:0 0; -webkit-transition: all 0.1s ease-in;
-webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in; width:447px;
display:block;
} }
.logocompatible:focus, .logocompatible:focus,
.logocompatible:hover { .logocompatible:hover {
outline:none;
background-position:0 100%; background-position:0 100%;
-webkit-transition: all 0.1s ease-in; outline:none;
-moz-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;} -moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
.logocompatiblemask
{
z-index:10;
position:absolute;
top:0;
left:0;
width:447px;
height:107px;
background-image:url('../img/logocompatiblemask.png');
background-position:0 100%;
background-repeat:no-repeat;
}
.titre
{
font-family: 'Open Sans', sans-serif;
font-weight:300;
color:#383838;
font-size:48px;
}
.tripleliste
{
margin-top:80px;
width:800px;
position:relative;
margin-left:auto;
margin-right:auto;
} }
.tripleliste ul .logocompatiblemask {
{ background-image:url('../img/logocompatiblemask.png');
margin-bottom:1em; background-position:0 100%;
width:600px; background-repeat:no-repeat;
margin-left:120px;} height:107px;
left:0;
position:absolute;
top:0;
width:447px;
z-index:10;
}
.tripleliste ul li .titre {
{text-align:left; color:#383838;
List-Style-Type:none; font-family: 'Open Sans', sans-serif;
color:#383838; font-size:48px;
font-size:16px; font-weight:300;
}
width:200px; .tripleliste {
float:left; margin-left:auto;
position:relative; margin-right:auto;
margin-top:80px;
position:relative;
width:800px;
}
.tripleliste ul {
margin-bottom:1em;
margin-left:120px;
width:600px;
}
.tripleliste ul li {
color:#383838;
float:left;
font-size:16px;
list-style-type:none;
position:relative;
text-align:left;
width:200px;
} }
html, html,
body { body {
margin:0;
height:100%; height:100%;
margin:0;
} }
.wrapper { .wrapper {
height:100%;
display:table;
margin:auto;
padding-bottom:110px;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
display:table;
height:100%;
margin:auto;
padding-bottom:110px;
} }
.main { .main {
display:table-cell; display:table-cell;
@ -597,24 +578,24 @@ h1 {
.locales { .locales {
float: left; float: left;
text-align: left; font-size: 12px;
padding-left: 1em; padding-left: 1em;
padding-top: 1em; padding-top: 1em;
font-size: 12px; text-align: left;
} }
.locales a, .locales a,
.locales a:visited { .locales a:visited {
text-decoration: none;
color: #737881; color: #737881;
text-decoration: none;
} }
.supportedLocales { .supportedLocales {
background-color: #f5f5f6;
display: none; display: none;
list-style-type: none; list-style-type: none;
padding-left: 0;
background-color: #f5f5f6;
margin: 0; margin: 0;
padding-left: 0;
} }
.supportedLocales li { .supportedLocales li {
@ -622,9 +603,9 @@ h1 {
} }
.supportedLocales li a { .supportedLocales li a {
display: block;
padding: 1em; padding: 1em;
padding-right: 2em; padding-right: 2em;
display: block;
} }
.supportedLocales li:hover { .supportedLocales li:hover {
@ -632,8 +613,8 @@ h1 {
} }
.localesBtn { .localesBtn {
padding: 1em;
display: inline-block; display: inline-block;
padding: 1em;
} }
.localesBtn:focus { .localesBtn:focus {
@ -668,9 +649,9 @@ h1 {
.champs, .champs,
.URLinput, .URLinput,
.mp3 { .mp3 {
width:90%;
margin:auto;
height:auto; height:auto;
margin:auto;
width:90%;
} }
.logo { .logo {
@ -678,8 +659,8 @@ h1 {
} }
.logocompatible img { .logocompatible img {
width:100%;
height: auto; height: auto;
width:100%;
} }
.downloadBtn { .downloadBtn {
@ -695,9 +676,9 @@ h1 {
.tripleliste ul, .tripleliste ul,
.tripleliste { .tripleliste {
width:auto;
margin-left:auto; margin-left:auto;
margin-top:auto; margin-top:auto;
width:auto;
} }
.logocompatiblemask { .logocompatiblemask {
@ -705,9 +686,9 @@ h1 {
} }
.logocompatible { .logocompatible {
height:auto;
background-image:none;
background-color:#4F4F4F; background-color:#4F4F4F;
background-image:none;
height:auto;
} }
.logocompatiblemask, .logocompatiblemask,

1
package.json
View file

@ -7,6 +7,7 @@
"dependencies": { "dependencies": {
"bower": "~1.8.0", "bower": "~1.8.0",
"grunt": "~1.0.1", "grunt": "~1.0.1",
"grunt-contrib-csslint": "~2.0.0",
"grunt-contrib-cssmin": "~2.2.0", "grunt-contrib-cssmin": "~2.2.0",
"grunt-contrib-uglify": "~3.0.0", "grunt-contrib-uglify": "~3.0.0",
"grunt-potomo": "~3.5.0" "grunt-potomo": "~3.5.0"