Mirrors/koel
2
0
Fork 0
mirror of https://github.com/koel/koel synced 2024-11-24 21:23:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

Use rem

Browse source
This commit is contained in:
An Phan 2016-06-02 17:46:01 +08:00
parent 9b7c166356
commit b98625c9ab
21 changed files with 66 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
resources/assets/js/app.vue
View file

@ -300,11 +300,11 @@
position: relative;
display: inline-block;
background: $colorGreen;
padding: 10px;
border-radius: 3px;
padding: .8rem;
border-radius: .2rem;
color: #fff;
font-family: $fontFamily;
font-size: $fontSize;
font-size: 1rem;
font-weight: $fontWeight_Thin;
/**
@ -325,8 +325,8 @@
color: $colorMainText;
font-family: $fontFamily;
font-size: $fontSize;
line-height: $fontSize * 1.5;
font-size: 1rem;
line-height: 1.5rem;
font-weight: $fontWeight_Thin;
padding-bottom: $footerHeight;

11
resources/assets/js/components/auth/login-form.vue
View file

@ -67,10 +67,10 @@
}
form {
width: 300px;
padding: 24px;
width: 280px;
padding: 1.8rem;
background: rgba(255,255,255,.08);
border-radius: 8px;
border-radius: .6rem;
border: 1px solid #333;
&.error {
@ -86,8 +86,7 @@
height: 172px;
}
@media only screen
and (max-width : 414px) {
@media only screen and (max-width : 414px) {
border: 0;
background: transparent;
}
@ -96,12 +95,10 @@
input {
display: block;
margin-top: 12px;
padding: 8px;
border: 0;
background: #fff;
outline: none;
width: 100%;
border-radius: 3px;
}
button {

12
resources/assets/js/components/main-wrapper/extra/index.vue
View file

@ -127,9 +127,9 @@
h1 {
font-weight: $fontWeight_UltraThin;
font-size: 28px;
font-size: 2.2rem;
margin-bottom: 16px;
line-height: 36px;
line-height: 2.8rem;
@include vertical-center();
align-items: initial;
@ -150,18 +150,18 @@
.more {
margin-top: 8px;
border-radius: 3px;
border-radius: .23rem;
background: $colorBlue;
color: #fff;
padding: 4px 8px;
padding: .3rem .6rem;
display: inline-block;
text-transform: uppercase;
font-size: 80%;
font-size: .8rem;
}
footer {
margin-top: 24px;
font-size: 90%;
font-size: .9rem;
a {
color: #fff;

4
resources/assets/js/components/main-wrapper/main-content/home.vue
View file

@ -168,8 +168,8 @@
}
h1 {
font-size: 18px;
margin: 0 0 24px;
font-size: 1.4rem;
margin: 0 0 1.8rem;
font-weight: $fontWeight_UltraThin;
}
}

10
resources/assets/js/components/main-wrapper/main-content/index.vue
View file

@ -97,8 +97,8 @@
h1.heading {
font-weight: $fontWeight_UltraThin;
font-size: 36px;
padding: 12px 24px;
font-size: 2.76rem;
padding: 1rem 1.8rem;
border-bottom: 1px solid $color2ndBgr;
min-height: 96px;
position: relative;
@ -145,14 +145,14 @@
@media only screen and (max-width: 768px) {
h1.heading {
font-size: 18px;
font-size: 1.38rem;
min-height: 0;
line-height: 24px;
line-height: 1.85rem;
text-align: center;
flex-direction: column;
.toggler {
font-size: 14px;
font-size: 1rem;
margin-left: 4px;
color: $colorHighlight;
}

8
resources/assets/js/components/main-wrapper/main-content/users.vue
View file

@ -131,8 +131,6 @@
}
button {
font-size: 12px;
padding: 6px 14px;
margin-right: 3px;
}
@ -169,19 +167,17 @@
}
h1 {
font-size: 140%;
font-size: 1.4rem;
margin-bottom: 5px;
.you {
font-size: 14px;
color: $colorHighlight;
margin-left: 8px;
margin-left: 5px;
}
}
.buttons {
display: none;
margin-top: 16px;
}

2
resources/assets/js/components/main-wrapper/sidebar/index.vue
View file

@ -251,7 +251,7 @@
border: 1px solid $color2ndText;
color: $colorMainText;
opacity: .3;
font-size: 90%;
font-size: .9rem;
display: block;
transition: .3s;

6
resources/assets/js/components/modals/edit-songs-form.vue
View file

@ -390,9 +390,9 @@
padding-left: 8px;
h1 {
font-size: 24px;
line-height: 28px;
margin-bottom: 4px;
font-size: 1.8rem;
line-height: 2.2rem;
margin-bottom: .3rem;
}
.mixed {

2
resources/assets/js/components/shared/add-to-menu.vue
View file

@ -104,7 +104,7 @@
p {
margin: 4px 0;
font-size: 90%;
font-size: .9rem;
&::first-of-type {
margin-top: 0;

6
resources/assets/js/components/shared/home-song-item.vue
View file

@ -103,8 +103,8 @@
height: 28px;
background: rgba(0, 0, 0, .7);
border: 1px solid transparent;
line-height: 26px;
font-size: 13px;
line-height: 2rem;
font-size: 1rem;
text-align: center;
z-index: 1;
display: none;
@ -141,7 +141,7 @@
.by {
display: block;
font-size: 90%;
font-size: .9rem;
margin-top: 2px;
color: $color2ndText;
opacity: .8;

1
resources/assets/js/components/shared/overlay.vue
View file

@ -97,7 +97,6 @@
}
button {
font-size: 12px;
margin-top: 16px;
}

2
resources/assets/js/components/shared/song-item.vue
View file

@ -106,7 +106,7 @@
opacity: .5;
i {
font-size: 150%;
font-size: 1.5rem;
}
}

4
resources/assets/js/components/shared/song-list.vue
View file

@ -534,7 +534,7 @@
i {
color: $colorHighlight;
font-size: 120%;
font-size: 1.2rem;
}
}
@ -571,7 +571,7 @@
&.artist {
opacity: .5;
font-size: 90%;
font-size: .9rem;
padding: 0 4px;
}
}

6
resources/assets/js/components/shared/view-mode-switch.vue
View file

@ -56,15 +56,15 @@
display: flex;
flex: 0 0 64px;
border: 1px solid rgba(255, 255, 255, .2);
height: 28px;
height: 2rem;
border-radius: 5px;
overflow: hidden;
a {
width: 50%;
text-align: center;
line-height: 26px;
font-size: 14px;
line-height: 2rem;
font-size: 1rem;
&.active {
background: #fff;

5
resources/assets/js/components/site-footer/equalizer.vue
View file

@ -296,13 +296,16 @@
left: 0;
display: flex;
justify-content: space-between;
font-size: 70%;
align-items: flex-start;
.band {
display: flex;
flex-direction: column;
align-items: center;
label {
font-size: .9rem;
}
}
.indicators {

10
resources/assets/js/components/site-footer/index.vue
View file

@ -345,7 +345,7 @@
top: 0;
left: 0;
font-weight: 700;
font-size: 50%;
font-size: .5rem;
text-align: center;
width: 100%;
}
@ -360,7 +360,6 @@
}
}
@media only screen and (max-width: 768px) {
position: absolute !important;
right: 0;
@ -391,7 +390,7 @@
#playerControls {
@include vertical-center();
flex: 0 0 256px;
font-size: 24px;
font-size: 1.8rem;
background: $colorPlayerControlsBgr;
@include hasSoftGradientOnTop($colorSidebarBgr);
@ -401,7 +400,7 @@
}
.play, .pause {
font-size: 26px;
font-size: 2rem;
display: inline-block;
width: 42px;
height: 42px;
@ -478,7 +477,7 @@
position: relative;
.meta {
font-size: 90%;
font-size: .9rem;
a {
&:hover {
@ -487,7 +486,6 @@
}
}
// Some little tweaks here and there
.plyr {
width: 100%;

4
resources/assets/js/components/site-header/index.vue
View file

@ -58,7 +58,7 @@
h1.brand {
flex: 1;
color: $colorMainText;
font-size: 22px;
font-size: 1.7rem;
font-weight: $fontWeight_UltraThin;
opacity: 0;
line-height: $headerHeight;
@ -66,7 +66,7 @@
}
.hamburger, .magnifier {
font-size: 140%;
font-size: 1.4rem;
flex: 0 0 48px;
order: -1;
line-height: $headerHeight;

2
resources/assets/js/components/site-header/search-form.vue
View file

@ -61,8 +61,6 @@
margin-top: 0;
}
@media only screen and (max-width : 667px) {
z-index: -1;
position: absolute;

2
resources/assets/js/components/site-header/user-badge.vue
View file

@ -69,7 +69,7 @@
.view-profile, .logout {
flex: 0 0 40px;
font-size: 140%;
font-size: 1.4rem;
margin-right: 0;
@include vertical-center();

6
resources/assets/sass/partials/_mixins.scss
View file

@ -148,7 +148,7 @@
.meta {
color: $color2ndText;
margin-top: 4px;
font-size: 12px;
font-size: .92rem;
}
a.name, a.artist {
@ -185,9 +185,9 @@
button {
$buttonHeight: 28px;
font-size: 12px;
font-size: .92rem;
height: $buttonHeight;
padding: 0 16px;
padding: 0 1.23rem;
line-height: $buttonHeight;
text-transform: uppercase;
display: inline-block;

27
resources/assets/sass/partials/_shared.scss
View file

@ -5,6 +5,7 @@
body, html {
overflow: hidden;
font-size: $fontSize;
}
input, select, button, textarea, .btn {
@ -12,10 +13,10 @@ input, select, button, textarea, .btn {
border: 0;
outline: 0;
font-family: $fontFamily;
font-size: $fontSize;
font-size: 1rem;
font-weight: $fontWeight_Thin;
padding: 4px 8px;
border-radius: 3px;
padding: .5rem .6rem;
border-radius: .2rem;
&:required, &:invalid {
box-shadow: none;
@ -28,7 +29,7 @@ input, select, button, textarea, .btn {
&[type="search"] {
border-radius: 12px;
height: 24px;
padding: 0 6px;
padding: 0 .5rem;
}
&[type="text"] {
@ -66,7 +67,7 @@ input[type="checkbox"] {
vertical-align: middle;
width: 14px;
height: 14px;
line-height: 16px;
line-height: 1.3rem;
text-align: center;
}
@ -116,30 +117,30 @@ a, a:link, a:visited {
}
p {
line-height: 20px;
line-height: 1.5rem;
}
.help {
opacity: .7;
font-size: 90%;
line-height: 16px;
font-size: .9rem;
line-height: 1.3rem;
}
label {
font-size: 110%;
font-size: 1.1rem;
margin-bottom: 8px;
display: block;
&.small {
font-size: 100%;
font-size: 1rem;
}
}
button, input[type="submit"], input[type="reset"], input[type="button"], .btn {
background: $colorBtnBgr;
color: $colorBtnText;
font-size: 14px;
padding: 8px 12px;
font-size: 1rem;
padding: .6rem 1rem;
cursor: pointer;
@include inset-when-pressed();
@ -200,7 +201,7 @@ button, input[type="submit"], input[type="reset"], input[type="button"], .btn {
border-bottom: 1px solid $tabColor;
a {
padding: 8px 12px;
padding: .6rem 1rem;
margin-left: 4px;
border-radius: 4px 4px 0 0;
text-transform: uppercase;