From c25a64e73792f3d81db5dc2138c620d3ad53a159 Mon Sep 17 00:00:00 2001 From: Daniel Barbero Martin Date: Wed, 8 Jan 2020 18:00:32 +0100 Subject: [PATCH] fix styles main.css --- visual_console_client/src/main.css | 175 +++++++++++++++++++++++++++++ 1 file changed, 175 insertions(+) diff --git a/visual_console_client/src/main.css b/visual_console_client/src/main.css index f8f61f7269..ac52c154ce 100644 --- a/visual_console_client/src/main.css +++ b/visual_console_client/src/main.css @@ -228,3 +228,178 @@ p.error-p-validate { width: 100%; color: #c00; } + +/* Styles for the solid icons */ + +.fa { + display: inline-block; + margin: 0; +} + +.fa, +.fa > svg, +.fa.medium, +.fa.medium > svg { + width: 28px; + height: 28px; +} + +.fa.fa-small, +.fa.fa-small > svg { + width: 14px; + height: 14px; +} + +.fa.fa-large, +.fa.fa-large > svg { + width: 44px; + height: 44px; +} + +.fa-spin { + animation: fa-spin 2s infinite linear; +} + +.fa-pulse { + animation: fa-spin 1s infinite steps(8); +} + +@keyframes fa-spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.autocomplete { + /*the container must be positioned relative:*/ + position: relative; + display: inline-block; +} +.autocomplete input { + /*background: pink;*/ +} +.autocomplete-items { + border: 1px solid #d4d4d4; + border-bottom: none; + border-top: none; + /*position the autocomplete items to be the same width as the container:*/ + position: absolute; + z-index: 1; + overflow: auto; + max-height: 150px; + max-width: 250px; +} +.autocomplete-items div { + width: 100%; + padding: 10px; + cursor: pointer; + background-color: #fff; + border-bottom: 1px solid #d4d4d4; + border-top: 1px solid #d4d4d4; +} +.autocomplete-items div:hover { + width: 100%; + background-color: #e9e9e9; +} +.autocomplete-active { + /*when navigating through the items using the arrow keys:*/ + background-color: DodgerBlue !important; + color: #ffffff; +} + +@font-face { + font-family: Alarm Clock; + src: url(alarm-clock.ttf); +} + +/* Digital clock */ + +.visual-console-item .digital-clock { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + flex-direction: column; + justify-content: center; + justify-items: center; + align-content: center; + align-items: center; +} + +.visual-console-item .digital-clock > span { + font-family: "Alarm Clock", "Courier New", Courier, monospace; + font-size: 50px; + + /* To improve legibility */ + text-rendering: optimizeLegibility; + text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px; +} + +.visual-console-item .digital-clock > span.date { + font-size: 25px; +} + +.visual-console-item .digital-clock > span.timezone { + font-size: 25px; +} + +/* Analog clock */ + +.visual-console-item .analogic-clock { + text-align: center; +} + +.visual-console-item .analogic-clock .hour-hand { + animation: rotate-hour 43200s infinite linear; +} + +.visual-console-item .analogic-clock .minute-hand { + animation: rotate-minute 3600s infinite linear; +} + +.visual-console-item .analogic-clock .second-hand { + animation: rotate-second 60s infinite linear; +} + +#html-tabs .ui-widget-header { + background-color: #ffffff; + border: 0px; +} + +#html-tabs .ui-tabs-anchor { + float: none; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +#html-tabs .ui-tabs-anchor img { + margin-right: 10px; +} + +#html-tabs .ui-tabs-nav li { + border-radius: 5px 5px 0px 0px; +} + +label span.p-slider { + width: 30px; +} + +li#li-size-item > label:not(:first-child), +li#li-position-item > label:not(:first-child) { + width: initial; + margin-left: 15px; +} + +li#li-image-item label { + display: flex; + flex-direction: row; + justify-content: flex-end; +} + +li#li-image-item label img { + flex: initial; +}