-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Switch Indentation from Spaces to Tabs for Stylesheet
- Loading branch information
Showing
1 changed file
with
115 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,208 +1,208 @@ | ||
| /* Styles go here */ | ||
| html,body { | ||
| height:100%; | ||
| width:100%; | ||
| margin:0; | ||
| padding:0; | ||
| height:100%; | ||
| width:100%; | ||
| margin:0; | ||
| padding:0; | ||
| } | ||
|
|
||
| .controls { | ||
| padding:10px; | ||
| position:absolute; | ||
| max-width:100%; | ||
| width:400px; | ||
| box-sizing:border-box; | ||
| padding:10px; | ||
| position:absolute; | ||
| max-width:100%; | ||
| width:400px; | ||
| box-sizing:border-box; | ||
| } | ||
|
|
||
| .controls input, | ||
| .controls button { | ||
| background-color:white; | ||
| font-family:inherit; | ||
| font-size: 15px; | ||
| border-radius:2px; | ||
| box-sizing:border-box; | ||
| height:50px; | ||
| outline:none; | ||
| box-shadow:0 2px 6px rgba(0, 0, 0, 0.3); | ||
| margin-left:10px; | ||
| border:solid 1px white; | ||
| display:block; | ||
| background-color:white; | ||
| font-family:inherit; | ||
| font-size: 15px; | ||
| border-radius:2px; | ||
| box-sizing:border-box; | ||
| height:50px; | ||
| outline:none; | ||
| box-shadow:0 2px 6px rgba(0, 0, 0, 0.3); | ||
| margin-left:10px; | ||
| border:solid 1px white; | ||
| display:block; | ||
| } | ||
|
|
||
| .controls input:first-child, | ||
| .controls button:first-child { | ||
| margin-left:0; | ||
| margin-left:0; | ||
| } | ||
|
|
||
| .controls input:focus, | ||
| .controls input:hover, | ||
| .controls button:focus, | ||
| .controls button:hover { | ||
| border-color: rgb(77, 144, 254); | ||
| border-color: rgb(77, 144, 254); | ||
| } | ||
|
|
||
| .controls input { | ||
| width:calc(100% - 60px); | ||
| padding:0 20px; | ||
| font-family:Roboto; | ||
| font-size:15px; | ||
| overflow:hidden; | ||
| text-overflow:ellipsis; | ||
| width:calc(100% - 60px); | ||
| padding:0 20px; | ||
| font-family:Roboto; | ||
| font-size:15px; | ||
| overflow:hidden; | ||
| text-overflow:ellipsis; | ||
| } | ||
|
|
||
| .controls button { | ||
| width:50px; | ||
| padding:15px; | ||
| cursor:pointer; | ||
| width:50px; | ||
| padding:15px; | ||
| cursor:pointer; | ||
| } | ||
|
|
||
| .controls button::-moz-focus-inner { | ||
| padding: 0; | ||
| border: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| } | ||
|
|
||
| .controls button svg { | ||
| height:20px; | ||
| width:20px; | ||
| height:20px; | ||
| width:20px; | ||
| } | ||
|
|
||
| .controls button svg path { | ||
| fill:gray; | ||
| fill:gray; | ||
| } | ||
|
|
||
| .controls button:focus, | ||
| .controls button:hover { | ||
| background-color:rgb(77, 144, 254); | ||
| background-color:rgb(77, 144, 254); | ||
| } | ||
|
|
||
| .controls button:focus svg path, | ||
| .controls button:hover svg path { | ||
| fill:white; | ||
| fill:white; | ||
| } | ||
|
|
||
| .controls.top-left input, | ||
| .controls.bottom-left input, | ||
| .controls.top-left button, | ||
| .controls.bottom-left button { | ||
| float:left; | ||
| float:left; | ||
| } | ||
|
|
||
| .controls.top-right input, | ||
| .controls.bottom-right input, | ||
| .controls.top-right button, | ||
| .controls.bottom-right button { | ||
| float:right; | ||
| float:right; | ||
| } | ||
|
|
||
| /* AutoComplete List */ | ||
|
|
||
| .pac-item { | ||
| padding: 6px 15px; | ||
| cursor:pointer; | ||
| padding: 6px 15px; | ||
| cursor:pointer; | ||
| } | ||
|
|
||
| .pac-item:hover { | ||
| background-color:rgb(240,240,240); | ||
| background-color:rgb(240,240,240); | ||
| } | ||
|
|
||
| .pac-logo::after { | ||
| height:0; | ||
| padding:0; | ||
| height:0; | ||
| padding:0; | ||
| } | ||
|
|
||
| /* Overlay */ | ||
|
|
||
| #overlay svg, | ||
| #overlay div, | ||
| #overlay span { | ||
| transition:opacity 0.5s; | ||
| pointer-events:none; | ||
| opacity:0; | ||
| transition:opacity 0.5s; | ||
| pointer-events:none; | ||
| opacity:0; | ||
| } | ||
|
|
||
| #overlay svg { | ||
| position:fixed; | ||
| top:0; | ||
| left:0; | ||
| width:100%; | ||
| height:100%; | ||
| background-color:rgba(255,255,255,0.5); | ||
| z-index:99; | ||
| position:fixed; | ||
| top:0; | ||
| left:0; | ||
| width:100%; | ||
| height:100%; | ||
| background-color:rgba(255,255,255,0.5); | ||
| z-index:99; | ||
| } | ||
|
|
||
| #overlay div { | ||
| position: absolute; | ||
| border:8px solid rgb(77, 144, 254); | ||
| border-radius:50%; | ||
| height:50px; | ||
| width:50px; | ||
| top:50%; | ||
| left:50%; | ||
| margin:-25px 0 0 -25px; | ||
| z-index:100; | ||
| position: absolute; | ||
| border:8px solid rgb(77, 144, 254); | ||
| border-radius:50%; | ||
| height:50px; | ||
| width:50px; | ||
| top:50%; | ||
| left:50%; | ||
| margin:-25px 0 0 -25px; | ||
| z-index:100; | ||
| } | ||
|
|
||
| #overlay span { | ||
| position:absolute; | ||
| bottom:30px; | ||
| left:50%; | ||
| margin:0px 0px 0px -100px; | ||
| color:white; | ||
| background-color:rgba(0, 0, 0, 0.5); | ||
| padding:20px 0px; | ||
| border-radius:5px; | ||
| text-align:center; | ||
| width:200px; | ||
| z-index:100; | ||
| font-family:Roboto; | ||
| font-size:15px; | ||
| position:absolute; | ||
| bottom:30px; | ||
| left:50%; | ||
| margin:0px 0px 0px -100px; | ||
| color:white; | ||
| background-color:rgba(0, 0, 0, 0.5); | ||
| padding:20px 0px; | ||
| border-radius:5px; | ||
| text-align:center; | ||
| width:200px; | ||
| z-index:100; | ||
| font-family:Roboto; | ||
| font-size:15px; | ||
| } | ||
|
|
||
| #overlay.loading svg, | ||
| #overlay.loading span { | ||
| opacity:1; | ||
| pointer-events:auto; | ||
| opacity:1; | ||
| pointer-events:auto; | ||
| } | ||
| #overlay.loading div { | ||
| -webkit-animation: pulsate 1s ease-out; | ||
| animation: pulsate 1s ease-out; | ||
| -webkit-animation-iteration-count: infinite; | ||
| animation-iteration-count: infinite; | ||
| -webkit-animation: pulsate 1s ease-out; | ||
| animation: pulsate 1s ease-out; | ||
| -webkit-animation-iteration-count: infinite; | ||
| animation-iteration-count: infinite; | ||
| } | ||
|
|
||
| @-webkit-keyframes pulsate { | ||
| 0% { | ||
| -webkit-transform: scale(.1); | ||
| transform: scale(.1); | ||
| opacity: 0.0; | ||
| } | ||
| 30% { | ||
| opacity: 1; | ||
| } | ||
| 60% { | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| -webkit-transform: scale(1.2); | ||
| transform: scale(1.2); | ||
| opacity: 0; | ||
| } | ||
| 0% { | ||
| -webkit-transform: scale(.1); | ||
| transform: scale(.1); | ||
| opacity: 0.0; | ||
| } | ||
| 30% { | ||
| opacity: 1; | ||
| } | ||
| 60% { | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| -webkit-transform: scale(1.2); | ||
| transform: scale(1.2); | ||
| opacity: 0; | ||
| } | ||
| } | ||
| @keyframes pulsate { | ||
| 0% { | ||
| -webkit-transform: scale(.1); | ||
| transform: scale(.1); | ||
| opacity: 0.0; | ||
| } | ||
| 30% { | ||
| opacity: 1; | ||
| } | ||
| 60% { | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| -webkit-transform: scale(1.2); | ||
| transform: scale(1.2); | ||
| opacity: 0; | ||
| } | ||
| 0% { | ||
| -webkit-transform: scale(.1); | ||
| transform: scale(.1); | ||
| opacity: 0.0; | ||
| } | ||
| 30% { | ||
| opacity: 1; | ||
| } | ||
| 60% { | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| -webkit-transform: scale(1.2); | ||
| transform: scale(1.2); | ||
| opacity: 0; | ||
| } | ||
| } |