Difference between revisions of "Template:NYMU-Taipei-css"
Ianliu1997 (Talk | contribs) |
Ianliu1997 (Talk | contribs) |
||
| Line 248: | Line 248: | ||
| − | + | /*hp tab start*/ | |
| − | + | @import "compass/css3"; | |
| + | |||
| + | @import url(https://fonts.googleapis.com/css?family=Rajdhani:300); | ||
| + | |||
| + | $colorWhite: rgba(255,255,255,1); | ||
| + | $colorDamnLight: rgba(0,220,220,1); | ||
| + | $colorLight: rgba(0,190,190,1); | ||
| + | $colorDark: rgba(60,60,60,1); | ||
| + | $colorBlack: rgba(33,33,33,1); | ||
| + | $fontSize: 18px; | ||
| + | |||
| + | |||
| + | |||
| + | .scifiUI { | ||
| + | list-style: none; | ||
| + | position: relative; | ||
| + | width: 600px; | ||
| + | margin: 50px auto; | ||
| + | padding: 0; | ||
| + | font-size: 1em; | ||
| + | color: $colorLight; | ||
| + | } | ||
| + | |||
| + | li { | ||
| + | display: inline-block; | ||
| + | |||
| + | input[type="radio"] { | ||
| + | @include opacity(0); | ||
| + | position: absolute; | ||
| + | outline: none; | ||
| + | |||
| + | &:checked { | ||
| + | |||
| + | ~ label { | ||
| + | background: $colorLight; | ||
| + | color: $colorBlack; | ||
| + | height: 50px; | ||
| + | font-size: 1.2em; | ||
| + | cursor: default; | ||
| + | @include box-shadow(0 0 10px $colorDamnLight); | ||
| + | } | ||
| + | |||
| + | ~ .section { | ||
| + | @include opacity(1); | ||
| + | width: 500px; | ||
| + | padding: 50px; | ||
| + | border: 1px solid $colorLight; | ||
| + | color: $colorDamnLight; | ||
| + | letter-spacing: .1em; | ||
| + | text-indent: 1em; | ||
| + | z-index: 1; | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | |||
| + | label { | ||
| + | display: block; | ||
| + | width: 120px; | ||
| + | height: 40px; | ||
| + | border: 1px solid rgba($colorLight, .7); | ||
| + | border-bottom: 0; | ||
| + | @include border-radius(5px 5px 0 0); | ||
| + | color: rgba($colorLight, .7); | ||
| + | line-height: 50px; | ||
| + | text-align: center; | ||
| + | cursor: pointer; | ||
| + | @include transition(all 200ms ease-in-out); | ||
| + | |||
| + | &:hover { | ||
| + | height: 50px; | ||
| + | border-color: $colorLight; | ||
| + | color: $colorLight; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .section { | ||
| + | @include opacity(0); | ||
| + | position: absolute; | ||
| + | top: 51px; | ||
| + | left: 0; | ||
| + | width: 1000px; | ||
| + | padding: 50px; | ||
| + | border: 1px solid $colorLight; | ||
| + | background: rgba($colorLight, .1); | ||
| + | color: $colorWhite; | ||
| + | letter-spacing: -1em; | ||
| + | text-indent: 1em; | ||
| + | |||
| + | @include transition(all 200ms ease-in-out); | ||
| + | } | ||
| + | } | ||
| + | /*hp tab end*/ | ||
| + | |||
| + | |||
</style> | </style> | ||
Revision as of 12:06, 29 September 2017
