123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&display=swap');
- body {
- font-family: 'Work Sans', sans-serif;
- }
- /* body background */
- .color__grey {
- background-color: #f5f5f5;
- }
- /* search bar */
- .search__form {
- width: 40rem;
- margin: 3rem auto;
- }
- .search__btn {
- padding: 8px 24px;
- }
- .search__form .search__bar:focus {
- box-shadow: 1px 1px 3px 1px #1266f1;
- }
- .h3 {
- font-size: 2rem;
- }
- /* card */
- .card{
- transition: all .3s;
- }
- .card:hover {
- transform: scale(1.05);
- }
- .card.card__notHover {
- transform: scale(1);
- }
- .card-title {
- font-size: 1.3rem;
- }
- /* top card */
- .card__grback {
- background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 65%, #1266f1 65%, #1266f1 100%);
- }
- .card__left {
- width: 60%;
- }
- .card__url {
- font-size: 1.8rem;
- margin-bottom: 1.5rem;
- }
- .card__url__icon {
- display: inline-block;
- margin-right: 1rem;
- font-size: 1.4rem;
- }
- .card__intro {
- font-size: .9rem;
- line-height: 1.5rem;
- }
- /* rank card */
- .card__rank__title {
- font-weight: 500;
- }
- .card__rank__title i {
- display: inline-block;
- margin-right: .5rem;
- font-size: 1.2rem;
- }
- .sub__date {
- padding: .3rem .75rem;
- }
- .rank__mark {
- font-size: 1.4rem;
- line-height: 1.4rem;
- }
- .rank_num {
- font-size: 2rem;
- }
- /* chart */
- .chart {
- width: 600px;
- height:220px;
- margin:1.5rem auto;
- }
- .add__words {
- line-height: 1.3rem;
- }
- .keyword_total {
- font-weight: 500;
- text-align: center;
- }
- .keyword_total > strong {
- font-size: 1.6rem;
- }
- .keyword_add {
- margin: 1rem auto;
- }
- .group__btn {
- border-radius: 10px;
- margin-bottom: 1rem;
- }
- .btn-group .btn__benefit {
- border: 1px solid grey;
- background-color: white;
- padding: .5rem;
- width: 8rem;
- font-size: .9rem;
- transition: all .4s;
- }
-
- .btn-group .btn__benefit:nth-of-type(1) {
- border-radius: 5px 0 0 5px;
- }
- .btn-group .btn__benefit:nth-of-type(2) {
- border-radius: 0 5px 5px 0;
- }
- .btn-group .btn__benefit:hover {
- background-color: grey;
- color: white;
- }
-
- .btn-group .btn__benefit.active {
- background-color: grey;
- color: white;
- }
|