7
7
--c-primary-active-focus : # ffa700 ;
8
8
--c-primary-inverse : # 232228 ;
9
9
--c-danger : red;
10
+ --c-danger-active : # D30000 ;
10
11
--c-secondary : # 167ac6 ;
11
12
--c-success : # 23CF5F ;
12
13
--c-success-active : # 1db351 ;
13
14
--c-gray : # 161616 ;
14
- --c-light-gray : # e8e8e8 ;
15
+ --c-light-gray : # 3e3e3e ;
15
16
--c-dark-gray : # 111111 ;
16
17
--c-white : # ffffff ;
17
18
--c-black : # 000000 ;
@@ -117,10 +118,12 @@ a:active {
117
118
118
119
.btn-primary : hover {
119
120
background-color : var (--c-primary-active );
121
+ transform : scale (1.05 );
120
122
}
121
123
122
124
.btn-primary : active {
123
125
background-color : var (--c-primary-active-focus );
126
+ transform : scale (1 );
124
127
}
125
128
126
129
.btn-primary-inverse {
@@ -1162,7 +1165,7 @@ iframe {
1162
1165
1163
1166
.video-list ::-webkit-scrollbar {
1164
1167
width : 6px ;
1165
- background-color : var (--c-base );
1168
+ background-color : var (--c-dark-gray );
1166
1169
}
1167
1170
1168
1171
.video-list ::-webkit-scrollbar-thumb {
@@ -1232,10 +1235,9 @@ iframe {
1232
1235
background-color : var (--c-dark-gray );
1233
1236
color : var (--c-white );
1234
1237
padding : 0 ;
1235
- cursor : pointer;
1236
1238
position : relative;
1237
1239
min-height : 60px ;
1238
- padding : 0 10px ;
1240
+ padding : 10px ;
1239
1241
transition : all 0.1s ease-in-out;
1240
1242
}
1241
1243
@@ -1244,17 +1246,22 @@ iframe {
1244
1246
margin : 0 ;
1245
1247
}
1246
1248
1247
- .video-item p {
1248
- margin : 0 ;
1249
- font-weight : 100 ;
1250
- white-space : nowrap;
1251
- text-overflow : ellipsis;
1252
- overflow : hidden;
1249
+ .video-item .video-item-autor {
1250
+ font-size : 12px ;
1253
1251
}
1254
1252
1255
1253
.video-item-content {
1256
1254
width : 100% ;
1257
1255
overflow : hidden;
1256
+ position : relative;
1257
+ }
1258
+
1259
+ .video-item-content p {
1260
+ margin : 0 ;
1261
+ font-weight : 100 ;
1262
+ white-space : nowrap;
1263
+ text-overflow : ellipsis;
1264
+ overflow : hidden;
1258
1265
}
1259
1266
1260
1267
.video-item-info {
@@ -1267,54 +1274,119 @@ iframe {
1267
1274
}
1268
1275
1269
1276
.video-item-settings {
1270
- display : none !important ;
1271
- height : 100 % ;
1277
+ background-color : rgba ( 0 , 0 , 0 , 0.7 ) ;
1278
+ color : var ( --c-white ) ;
1272
1279
position : absolute;
1273
1280
right : 0 ;
1274
1281
top : 0 ;
1275
- width : 30px ;
1276
- display : flex;
1277
- }
1278
-
1279
- .video-item-settings > p {
1280
1282
height : 100% ;
1281
1283
width : 100% ;
1284
+ z-index : 1 ;
1285
+ opacity : 0 ;
1286
+ visibility : hidden;
1282
1287
display : flex;
1283
1288
align-items : center;
1284
1289
justify-content : center;
1285
1290
transition : all 0.1s ease-in-out;
1286
1291
}
1287
1292
1288
- .video-item-settings .video-item-remove {
1293
+ .video-item-settings > p {
1294
+ margin : 0 5px ;
1295
+ cursor : pointer;
1296
+ transition : all 0.1s ease-in-out;
1297
+ }
1298
+
1299
+ .video-item-settings p [class ^= "video-item-" ] {
1300
+ background-color : var (--c-light-gray );
1301
+ height : 30px ;
1302
+ width : 30px ;
1303
+ border-radius : 50% ;
1304
+ text-align : center;
1305
+ line-height : 30px ;
1306
+ }
1307
+
1308
+ .video-item-settings .video-item-play .fa {
1309
+ font-size : 12px ;
1310
+ }
1311
+
1312
+ .video-item-settings .video-item-play .fa-play {
1313
+ margin-left : 2px ;
1314
+ }
1315
+
1316
+ .video-item-settings .video-item-play .fa-pause {
1317
+ margin-left : 1px ;
1318
+ }
1319
+
1320
+ .video-item-settings .video-item-play : hover {
1321
+ color : var (--c-base );
1289
1322
background-color : var (--c-primary );
1323
+ }
1324
+
1325
+ .video-item-settings .video-item-play : active {
1290
1326
color : var (--c-base );
1327
+ background-color : var (--c-primary-active );
1328
+ }
1329
+
1330
+ .video-item-settings .video-item-remove : hover {
1331
+ background-color : var (--c-danger );
1291
1332
}
1292
1333
1293
1334
.video-item-settings .video-item-remove : active {
1294
- background-color : var (--c-primary -active );
1335
+ background-color : var (--c-danger -active );
1295
1336
}
1296
1337
1297
- .video-item-settings .video-item-add {
1338
+ .video-item-settings .video-item-add .fa {
1339
+ top : 1px ;
1340
+ margin-left : 1px ;
1341
+ position : relative;
1342
+ }
1343
+
1344
+ .video-item-settings .video-item-add : hover {
1298
1345
background-color : var (--c-success );
1299
1346
}
1300
1347
1301
1348
.video-item-settings .video-item-add : active {
1302
1349
background-color : var (--c-success-active );
1303
1350
}
1304
1351
1305
- .video-item : hover {
1352
+ .video-item-title {
1353
+ line-height : 18px ;
1354
+ }
1355
+
1356
+ .video-item-hint {
1357
+ text-transform : uppercase;
1358
+ font-size : 10px ;
1359
+ border : 1px solid var (--c-primary );
1360
+ color : var (--c-primary );
1361
+ display : none;
1362
+ padding : 0 5px ;
1363
+ font-weight : 600 !important ;
1364
+ }
1365
+
1366
+ .video-item-hint .fa {
1367
+ font-size : 8px ;
1368
+ margin-right : 3px ;
1369
+ }
1370
+
1371
+ .video-item : hover .video-item-settings {
1372
+ opacity : 1 ;
1373
+ visibility : visible;
1374
+ }
1375
+
1376
+ .video-item .active {
1306
1377
background-color : var (--c-black );
1307
1378
}
1308
1379
1309
- .video-item-image {
1310
- flex : 0 0 45px ;
1311
- margin : 0 10px 0 0 ;
1380
+ .video-item .active .video-item-hint {
1381
+ display : inline-block;
1312
1382
}
1313
1383
1314
- .video-item-image img {
1384
+ .video-item-image {
1315
1385
display : block;
1316
- width : 45px ;
1317
- height : auto;
1386
+ height : 60px ;
1387
+ width : 80px ;
1388
+ background-position : center center;
1389
+ margin-right : 15px ;
1318
1390
}
1319
1391
1320
1392
.video-item-details {
@@ -1323,7 +1395,6 @@ iframe {
1323
1395
1324
1396
.video-item-details p {
1325
1397
margin : 0 15px 0 0 ;
1326
- line-height : 14px ;
1327
1398
font-size : 12px ;
1328
1399
}
1329
1400
@@ -1357,7 +1428,6 @@ iframe {
1357
1428
1358
1429
# related-video-list .related-video-content ::-webkit-scrollbar {
1359
1430
width : 6px ;
1360
- background-color : var (--c-base );
1361
1431
}
1362
1432
1363
1433
# related-video-list .related-video-content ::-webkit-scrollbar-thumb {
@@ -1400,7 +1470,6 @@ iframe {
1400
1470
1401
1471
# playlist-video-list .playlist-video-content ::-webkit-scrollbar {
1402
1472
width : 6px ;
1403
- background-color : var (--c-base );
1404
1473
}
1405
1474
1406
1475
# playlist-video-list .playlist-video-content ::-webkit-scrollbar-thumb {
@@ -1432,12 +1501,6 @@ iframe {
1432
1501
border : none;
1433
1502
}
1434
1503
1435
- .video-list-featured .video-item-image {
1436
- width : 80px ;
1437
- height : auto;
1438
- flex : auto;
1439
- }
1440
-
1441
1504
.video-list-featured .video-item-info {
1442
1505
background-color : transparent;
1443
1506
}
@@ -1446,17 +1509,6 @@ iframe {
1446
1509
display : inline-block;
1447
1510
}
1448
1511
1449
- .video-list-featured .video-item : hover .video-item-info {
1450
- left : 0 ;
1451
- }
1452
-
1453
- .video-list-featured .video-item : hover .video-item-settings {
1454
- right : -30px ;
1455
- top : 0 ;
1456
- opacity : 1 ;
1457
- visibility : visible;
1458
- }
1459
-
1460
1512
# feed-video-list {
1461
1513
top : inherit;
1462
1514
bottom : 0 ;
@@ -1493,30 +1545,11 @@ iframe {
1493
1545
margin : 5px 0 15px 0 ;
1494
1546
}
1495
1547
1496
- # feed-video-list .grid-list .video-item : not (.hidden-thumbnails ) .video-item-image : before {
1497
- content : '\25B6 Play' ;
1498
- color : var (--c-white );
1499
- background-color : rgba (0 , 0 , 0 , 0.6 );
1500
- padding : 8px 15px ;
1501
- display : block;
1502
- position : absolute;
1503
- top : 50% ;
1504
- right : 50% ;
1505
- transform : translate (50% , -50% );
1506
- opacity : 0 ;
1507
- visibility : hidden;
1508
- transition : all 0.2s ease-in-out;
1509
- }
1510
-
1511
1548
# feed-video-list .grid-list .video-item-info {
1512
1549
display : block;
1513
1550
padding : 0 ;
1514
1551
}
1515
1552
1516
- # feed-video-list .grid-list .video-item-info : active : not (.hidden-thumbnails ) .video-item-image : before {
1517
- background-color : var (--c-black );
1518
- }
1519
-
1520
1553
# feed-video-list .grid-list .video-item .hidden-thumbnails .video-item-settings {
1521
1554
height : 26px ;
1522
1555
width : 30px ;
@@ -1532,11 +1565,6 @@ iframe {
1532
1565
top : 0 ;
1533
1566
}
1534
1567
1535
- # feed-video-list .grid-list .video-item : hover : not (.hidden-thumbnails ) .video-item-image : before {
1536
- opacity : 1 ;
1537
- visibility : visible;
1538
- }
1539
-
1540
1568
@media screen and (max-width : 1600px ) and (min-width : 992px ) {
1541
1569
# feed-video-list .grid-list .video-item {
1542
1570
width : calc (50% - 10px );
0 commit comments