t510599/2021
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Style] Unify colors

Browse Source
This commit is contained in:
hyperbola 2021-01-19 18:46:47 +08:00
parent 61338668da
commit cf103b70f5
No known key found for this signature in database
GPG Key ID: D987B1D59478B51F
2 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/assets/scss/CFP/agenda.scss
View File

@ -1,16 +1,19 @@
@import '../color.scss';
$fontColor: #226bb4; // added to solve unnamed color error $fontColor: #226bb4; // added to solve unnamed color error
// import google font // import google font
// This font has been imported in main.scss linked to App.vue; no need to import // This font has been imported in main.scss linked to App.vue; no need to import
// @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap"); // @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap");
//my variable // my variable
$color-pale-grey: #f0f7fd; // There colors have been moved to scss/color.scss to share with others
$color-dark-slate-blue: #1f4163; // $color-pale-grey: #f0f7fd;
$color-dark-sky-blue: #3d93e9; // $color-dark-slate-blue: #1f4163;
$color-white: #ffffff; // $color-dark-sky-blue: #3d93e9;
$color-slate-blue: #5f7a95; // $color-white: #ffffff;
$color-mid-blue: #226bb4; // $color-slate-blue: #5f7a95;
// $color-mid-blue: #226bb4;
$fontFamily-NotoSansTC: "Noto Sans TC"; $fontFamily-NotoSansTC: "Noto Sans TC";
@ -41,7 +44,7 @@ $limitWidth: 80vw;
line-height: 1.9; line-height: 1.9;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
color: $color-mid-blue; color: $mid-blue;
margin: 10px 0; margin: 10px 0;
} }
&__content { &__content {
@ -55,7 +58,7 @@ $limitWidth: 80vw;
line-height: 2.1; line-height: 2.1;
letter-spacing: 0.2px; letter-spacing: 0.2px;
text-align: left; text-align: left;
color: $color-mid-blue; color: $mid-blue;
} }
strong { strong {
@ -75,7 +78,7 @@ $limitWidth: 80vw;
height: 4px; height: 4px;
width: 4px; width: 4px;
transform: translate(-200%, -150%); transform: translate(-200%, -150%);
background-color: $color-mid-blue; background-color: $mid-blue;
border-radius: 50%; border-radius: 50%;
} }
} }
@ -93,7 +96,7 @@ $limitWidth: 80vw;
line-height: 2.2; line-height: 2.2;
letter-spacing: normal; letter-spacing: normal;
text-align: left; text-align: left;
color: $color-mid-blue; color: $mid-blue;
margin: 10px 0; margin: 10px 0;
} }
} }
@ -113,14 +116,14 @@ $limitWidth: 80vw;
&__itemBox { &__itemBox {
width: 330px; width: 330px;
border-radius: 13px; border-radius: 13px;
background-color: $color-mid-blue; background-color: $mid-blue;
padding: 26px 20px 34px 20px; padding: 26px 20px 34px 20px;
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
width: 90%; width: 90%;
margin: 20px auto; margin: 20px auto;
} }
&-title { &-title {
color: $color-white; color: $white;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
width: 100%; width: 100%;
@ -141,7 +144,7 @@ $limitWidth: 80vw;
font-size: 19px; font-size: 19px;
P { P {
color: $color-white; color: $white;
font-family: $fontFamily-NotoSansTC; font-family: $fontFamily-NotoSansTC;
margin: 15px 0; margin: 15px 0;
} }
@ -220,7 +223,7 @@ $limitWidth: 80vw;
&__itemBox { &__itemBox {
border-radius: 29px; border-radius: 29px;
box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56); box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
background-color: $color-white; background-color: $white;
margin: 20px 0; margin: 20px 0;
padding: 10px 20px; padding: 10px 20px;
cursor: pointer; cursor: pointer;

4
src/assets/scss/color.scss
View File

@ -1,2 +1,6 @@
$mid-blue: #226bb4; $mid-blue: #226bb4;
$white: white; $white: white;
$pale-grey: #f0f7fd;
$dark-slate-blue: #1f4163;
$dark-sky-blue: #3d93e9;
$slate-blue: #5f7a95;