mirror of
				https://github.com/gyurix1968/guacamole-client.git
				synced 2025-10-31 09:03:21 +00:00 
			
		
		
		
	GUAC-932: Restyle login page and general UI.
This commit is contained in:
		| @@ -28,26 +28,19 @@ input[type="submit"], button, a.button { | ||||
|     background-color: #3C3C3C; | ||||
|  | ||||
|     border: 1px solid rgba(0, 0, 0, 0.4); | ||||
|     -moz-border-radius: 0.25em; | ||||
|     -webkit-border-radius: 0.25em; | ||||
|     -khtml-border-radius: 0.25em; | ||||
|     border-radius: 0.25em; | ||||
|  | ||||
|     color: white; | ||||
|     text-shadow: -1px -1px rgba(0, 0, 0, 0.3); | ||||
|     font-size: 1em; | ||||
|     font-weight: bold; | ||||
|  | ||||
|     box-shadow: inset -1px -1px 0.1em rgba(0, 0, 0, 0.25), | ||||
|                 inset 1px 1px 0.1em rgba(255, 255, 255, 0.25), | ||||
|                 -1px -1px 0.1em rgba(0, 0, 0, 0.25), | ||||
|                 1px 1px 0.1em rgba(255, 255, 255, 0.25); | ||||
|      | ||||
|     padding: 0.35em; | ||||
|     padding-right: 1em; | ||||
|     padding-left: 1em; | ||||
|     padding: 0.35em 1em; | ||||
|     min-width: 5em; | ||||
|     margin: 0.25em; | ||||
|  | ||||
|     border-bottom: rgba(0, 0, 0, 0.25); | ||||
|     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); | ||||
|  | ||||
| } | ||||
|  | ||||
| input[type="submit"]:hover, button:hover, a.button:hover { | ||||
|   | ||||
							
								
								
									
										43
									
								
								guacamole/src/main/webapp/app/index/styles/font-carlito.css
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										43
									
								
								guacamole/src/main/webapp/app/index/styles/font-carlito.css
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,43 @@ | ||||
| /* | ||||
|  * Copyright (C) 2014 Glyptodon LLC | ||||
|  * | ||||
|  * Permission is hereby granted, free of charge, to any person obtaining a copy | ||||
|  * of this software and associated documentation files (the "Software"), to deal | ||||
|  * in the Software without restriction, including without limitation the rights | ||||
|  * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||||
|  * copies of the Software, and to permit persons to whom the Software is | ||||
|  * furnished to do so, subject to the following conditions: | ||||
|  * | ||||
|  * The above copyright notice and this permission notice shall be included in | ||||
|  * all copies or substantial portions of the Software. | ||||
|  * | ||||
|  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||||
|  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||||
|  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||||
|  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||||
|  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||||
|  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | ||||
|  * THE SOFTWARE. | ||||
|  */ | ||||
|  | ||||
| /* | ||||
|  * The Carlito font is licensed under the SIL Open Font License, and thus is | ||||
|  * freely redistributable so long as it is distributed with software. | ||||
|  * | ||||
|  * The SIL OFL license can be found at http://scripts.sil.org/OFL or in the | ||||
|  * "LICENSE" file within the same directory as the Carlito-*.woff font files. | ||||
|  */ | ||||
|  | ||||
| @font-face { | ||||
|     font-family: 'Carlito'; | ||||
|     font-weight: normal; | ||||
|     font-style: normal; | ||||
|     src: url('fonts/carlito/Carlito-Regular.woff') format('woff'); | ||||
| } | ||||
|  | ||||
| @font-face { | ||||
|     font-family: 'Carlito'; | ||||
|     font-weight: bold; | ||||
|     font-style: normal; | ||||
|     src: url('fonts/carlito/Carlito-Bold.woff') format('woff'); | ||||
| } | ||||
| @@ -33,7 +33,7 @@ div.location, input[type=text], input[type=number], input[type=password], textar | ||||
|     width: 100%; | ||||
|     max-width: 16em; | ||||
|     padding: 0.25em; | ||||
|     font-size: 10pt; | ||||
|     font-size: 0.8em; | ||||
|     background: white; | ||||
|     cursor: text; | ||||
| } | ||||
| @@ -45,82 +45,3 @@ textarea { | ||||
|     white-space: nowrap; | ||||
|     overflow: auto; | ||||
| } | ||||
|  | ||||
| input[type="submit"], button, a.button { | ||||
|      | ||||
|     -webkit-appearance: none; | ||||
|     text-decoration: none; | ||||
|  | ||||
|     background-color: #3C3C3C; | ||||
|  | ||||
|     border: 1px solid rgba(0, 0, 0, 0.4); | ||||
|     -moz-border-radius: 0.25em; | ||||
|     -webkit-border-radius: 0.25em; | ||||
|     -khtml-border-radius: 0.25em; | ||||
|     border-radius: 0.25em; | ||||
|  | ||||
|     color: white; | ||||
|     text-shadow: -1px -1px rgba(0, 0, 0, 0.3); | ||||
|     font-size: 1em; | ||||
|  | ||||
|     box-shadow: inset -1px -1px 0.1em rgba(0, 0, 0, 0.25), | ||||
|                 inset 1px 1px 0.1em rgba(255, 255, 255, 0.25), | ||||
|                 -1px -1px 0.1em rgba(0, 0, 0, 0.25), | ||||
|                 1px 1px 0.1em rgba(255, 255, 255, 0.25); | ||||
|      | ||||
|     padding: 0.35em; | ||||
|     padding-right: 1em; | ||||
|     padding-left: 1em; | ||||
|     min-width: 5em; | ||||
|     margin: 0.25em; | ||||
|  | ||||
| } | ||||
|  | ||||
| input[type="submit"]:hover, button:hover, a.button:hover { | ||||
|     background-color: #5A5A5A; | ||||
| } | ||||
|  | ||||
| input[type="submit"]:active, button:active, a.button:active { | ||||
|  | ||||
|     background-color: #2C2C2C; | ||||
|      | ||||
|     box-shadow:  | ||||
|                 inset 1px 1px 0.25em rgba(0, 0, 0, 0.25), | ||||
|                 -1px -1px 0.25em rgba(0, 0, 0, 0.25), | ||||
|                 1px 1px 0.25em rgba(255, 255, 255, 0.25); | ||||
| } | ||||
|  | ||||
| button.danger, a.button.danger { | ||||
|     background: #A43; | ||||
| } | ||||
|  | ||||
| button.danger:hover, a.button.danger:hover { | ||||
|     background: #C54; | ||||
| } | ||||
|  | ||||
| button.danger:active, a.button.danger:active { | ||||
|     background: #932; | ||||
| } | ||||
|  | ||||
| a.button { | ||||
|     display: inline-block; | ||||
| } | ||||
|  | ||||
| .button.logout, .button.manage, .button.back { | ||||
|     background-repeat: no-repeat; | ||||
|     background-size: 1em; | ||||
|     background-position: 0.5em 0.45em; | ||||
|     padding-left: 1.8em; | ||||
| } | ||||
|  | ||||
| .button.logout { | ||||
|     background-image: url('images/action-icons/guac-logout.png'); | ||||
| } | ||||
|  | ||||
| .button.manage { | ||||
|     background-image: url('images/action-icons/guac-config.png'); | ||||
| } | ||||
|  | ||||
| .button.back { | ||||
|     background-image: url('images/action-icons/guac-back.png'); | ||||
| } | ||||
|   | ||||
| @@ -49,32 +49,29 @@ | ||||
| } | ||||
|  | ||||
| .status { | ||||
|     max-width: 75%; | ||||
|     width: 4in; | ||||
|  | ||||
|     width: 75%; | ||||
|     max-width: 5in; | ||||
|     margin-left: auto; | ||||
|     margin-right: auto; | ||||
|     overflow: auto; | ||||
|  | ||||
|     border: 1px solid rgba(0, 0, 0, 0.5); | ||||
|     background: #E7E7E7; | ||||
|  | ||||
|     -moz-border-radius: 0.2em; | ||||
|     -webkit-border-radius: 0.2em; | ||||
|     -khtml-border-radius: 0.2em; | ||||
|     border-radius: 0.2em; | ||||
|  | ||||
|     box-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.6); | ||||
|     background: white; | ||||
|     border: 1px solid rgba(0, 0, 0, 0.25); | ||||
|     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); | ||||
|   | ||||
|     text-align: left; | ||||
|     font-size: 0.8em; | ||||
|      | ||||
| } | ||||
|  | ||||
| .status .title { | ||||
|     font-size: 1.1em; | ||||
|     font-size: 1.25em; | ||||
|     font-weight: bold; | ||||
|     border-bottom: 1px solid black; | ||||
|     margin-bottom: 0.5em; | ||||
|     background: rgba(0, 0, 0, 0.04); | ||||
|     border-bottom: 1px solid rgba(0, 0, 0, 0.125); | ||||
|     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125); | ||||
|     margin: 0; | ||||
|     padding: 0.5em 1em; | ||||
| } | ||||
|  | ||||
| .status.error { | ||||
| @@ -83,7 +80,7 @@ | ||||
| } | ||||
|  | ||||
| .status > * { | ||||
|     margin: 0.75em; | ||||
|     margin: 1.25em; | ||||
| } | ||||
|  | ||||
| /* Fade entire status area in/out based on shown status */ | ||||
|   | ||||
| @@ -28,12 +28,16 @@ | ||||
| } | ||||
|  | ||||
| body { | ||||
|     background: #EEE; | ||||
|     font-family: FreeSans, Helvetica, Arial, sans-serif; | ||||
|     background: white; | ||||
|     font-family: Carlito, FreeSans, Helvetica, Arial, sans-serif; | ||||
|     padding: 0; | ||||
|     margin: 0; | ||||
| } | ||||
|  | ||||
| input[type="submit"], button { | ||||
|     font-family: Carlito, FreeSans, Helvetica, Arial, sans-serif; | ||||
| } | ||||
|  | ||||
| img { | ||||
|     border: none; | ||||
|     vertical-align: middle; | ||||
| @@ -52,17 +56,23 @@ h1 { | ||||
|  | ||||
| h2 { | ||||
|  | ||||
|     border-top: 1px solid #AAA; | ||||
|     border-bottom: 1px solid #AAA; | ||||
|     background: rgba(0, 0, 0, 0.07); | ||||
|     font-size: 1.25em; | ||||
|     font-weight: bold; | ||||
|     padding: 0.75em 0.5em; | ||||
|  | ||||
|     padding: 0.5em; | ||||
|     margin: 0; | ||||
|     font-size: 1.5em; | ||||
|     text-transform: uppercase; | ||||
|     border-bottom: 1px solid rgba(0, 0, 0, 0.125); | ||||
|     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125); | ||||
|     background: rgba(0, 0, 0, 0.04); | ||||
|  | ||||
|     font-weight: lighter; | ||||
|     text-shadow: 1px 1px white; | ||||
|     margin-bottom: 1em; | ||||
|     margin-top: 0; | ||||
|     border-top: none; | ||||
| } | ||||
|  | ||||
| h2 ~ h2 { | ||||
|     margin-top: 1em; | ||||
|     border-top: 1px solid rgba(0, 0, 0, 0.125); | ||||
| } | ||||
|  | ||||
| div.section { | ||||
|   | ||||
		Reference in New Issue
	
	Block a user