@ -7,6 +7,14 @@
@ font-face { font-family : Raleway ; font-weight : 300 ; src : url ( . . / fonts / raleway_300 . ttf ) ; }
/ *
ALL
* /
* {
box-sizing : border-box ;
transition : . 15s ease ;
}
/ *
body
@ -19,69 +27,6 @@ body {
}
/ *
header
* /
header {
height : 50px ; margin : 0 ; padding : 0 30px ;
display : flex ; align-items : center ; justify-content : space-between ;
background : # f8f8fa ; border-bottom : 1px solid # d0d0d0 ;
}
header h1 {
font-family : Raleway ; font-weight : 200 ;
}
header svg {
width : 24px ; height : 24px ; vertical-align : middle ;
transition : . 15s ease ;
}
header a : hover > svg , header a : focus > svg {
filter : brightness ( . 5 ) ;
}
header input [ type = "search" ] {
width : 250px ;
padding : 5px 35px 5px 10px ;
border : 0 ; border-radius : 1px ;
font-family : "Segoe UI" , Helvetica , "Droid Sans" , Arial , sans-serif ;
box-shadow : 0 0 1px rgba ( 0 , 0 , 0 , . 4 ) ; transition : . 15s ease ;
}
header input [ type = "search" ] ~ a {
position : relative ; left : -33px ;
}
header input [ type = "search" ] : focus {
box-shadow : 0 0 4px rgba ( 0 , 102 , 255 , . 9 ) ;
}
header input [ type = "search" ] ~ a > svg > path {
fill : # cccccc ; transition : . 15s ease ;
}
header input [ type = "search" ] : focus ~ a > svg > path {
fill : # 333333 ;
}
# spotlight a {
padding : 8px 18px 6px 18px ;
color : # 727272 ; font-size : 15px ;
border-bottom : 2px solid rgba ( 93 , 123 , 141 , 0 ) ;
transition : border . 15s ease ;
}
# spotlight a : hover , header # spotlight a : focus {
border-bottom : 2px solid rgba ( 93 , 123 , 141 , 1 ) ;
}
footer {
margin : 20px 10 % 5px 10 % ; padding : 10px 0 ;
text-align : center ; font-size : 11px ; font-style : italic ;
color : # a0a0a0 ;
border-top : 1px solid rgba ( 0 , 0 , 0 , . 1 ) ;
}
footer p {
margin : 3px 0 ;
}
/ *
links
* /
@ -95,75 +40,19 @@ a:focus {
/ *
alert overlay
* /
. alert {
position : fixed ; left : 15 % ;
display : flex ; align-items : center ;
width : 70 % ; z-index : 10 ;
font-family : NotoSans ; font-size : 14px ; color : # 212121 ;
background : # ffffff ;
border-bottom : 5px solid # 4caf50 ;
border-radius : 1px ; box-shadow : 0 1px 12px rgba ( 0 , 0 , 0 , 0 . 3 ) ;
transition : opacity . 15s ease ;
/* Buttons */
input [ type = "button" ] ,
input [ type = "submit" ] {
padding : 6px 0 ;
border-radius : 3px ;
font-size : 14px ;
font-weight : 400 ;
border : 1px solid transparent ;
}
. alert . ok {
border-color : # 4caf50 ;
}
. alert . error {
border-color : # f44336 ;
}
. alert span {
flex-grow : 1 ; margin : 15px 10px 10px 0 ;
}
. alert input [ type = "button" ] {
margin : 3px 30px 0 0 ;
}
. alert svg {
margin : 15px 20px 10px 30px ;
}
/ *
buttons
* /
input [ type = "button" ] {
font-family : NotoSans ; font-size : 14px ; /*font-weight: bold;*/
text-align : center ;
padding : 5px 15px ;
transition : . 1s ease ;
}
/* flat */
input [ type = "button" ] . flat {
border : none ;
background : rgba ( 0 , 0 , 0 , 0 ) ; color : # 727272 ;
}
input [ type = "button" ] . flat : hover {
background : rgba ( 0 , 0 , 0 , . 1 ) ;
}
input [ type = "button" ] . flat : focus {
background : rgba ( 0 , 0 , 0 , . 2 ) ;
}
/* raised */
input [ type = "button" ] . raised {
border : none ;
background : # e0e0e0 ; color : # 212121 ;
box-shadow : 0 1px 2px rgba ( 0 , 0 , 0 , . 3 ) ;
}
input [ type = "button" ] . raised : hover ,
input [ type = "button" ] . raised : focus {
background : # d5d5d5 ;
}
input [ type = "button" ] . raised : active {
background : # d6d6d6 ;
box-shadow : 0 1px 8px rgba ( 0 , 0 , 0 , . 3 ) ;
/* Checkbox */
input [ type = "checkbox" ] {
vertical-align : middle ;
}
/* Input text */
@ -180,23 +69,20 @@ input[type="password"]:focus {
}
section {
margin : 10px 5 % ;
}
section h1 {
border-bottom : 1px solid # a0a0a0 ;
font-family : Raleway ; font-size : 24px ;
font-weight : 200 ; color : # 242424 ;
}
section * {
transition : . 15s ease ;
}
/* Bootstrap-style rules */
. flex {
display : flex ;
}
. bg-green ,
. bg-green {
background-color : # 149641 ;
border-color : # 0e692d ;
color : # ffffff ;
}
. bg-green : hover ,
. bg-green : focus ,
. bg-green : active {
background-color : # 0f7331 ;
border-color : # 073617 ;
}