diff --git a/VAR.Focus.Web/Styles/01. base.css b/VAR.Focus.Web/Styles/01. base.css index b037f2c..832a47a 100644 --- a/VAR.Focus.Web/Styles/01. base.css +++ b/VAR.Focus.Web/Styles/01. base.css @@ -44,20 +44,24 @@ h3 { display: block; background-color: black; } -.divHeader a { - text-decoration: none; -} -.divHeader h1 { - font-size: 30px; - color: yellow; - margin: 0; - text-shadow: none; -} -.divUserInfo{ + + .divHeader a { + text-decoration: none; + } + + .divHeader h1 { + font-size: 30px; + color: yellow; + margin: 0; + text-shadow: none; + } + +.divUserInfo { position: absolute; top: 0; right: 0; } + .divContent { padding-left: 10px; padding-right: 10px; @@ -79,21 +83,25 @@ h3 { display: inline-block; font-size: 0; } -.formRow{ + +.formRow { display: block; font-size: 0; margin: 10px; } -.formLabel{ + +.formLabel { display: inline-block; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 12px; text-shadow: 0 1px 1px rgba(255,255,255,0.5); } -.formLabel span:last-child::after{ - content: ':'; -} -.formField{ + + .formLabel span:last-child::after { + content: ':'; + } + +.formField { display: inline-block; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 12px; @@ -109,21 +117,24 @@ h3 { padding: 3px; box-shadow: inset 0px -2px 5px rgba(255,255,255,1), inset 0px 2px 5px rgba(128,128,128,1); } -.textbox:focus{ - border: solid 1px black; - box-shadow: 0px 0px 10px rgba(255,255,255,0.5), inset 0px -2px 5px rgba(255,255,255,1), inset 0px 2px 5px rgba(0,0,0,0.5); -} -.textboxInvalid{ + + .textbox:focus { + border: solid 1px black; + box-shadow: 0px 0px 10px rgba(255,255,255,0.5), inset 0px -2px 5px rgba(255,255,255,1), inset 0px 2px 5px rgba(0,0,0,0.5); + } + +.textboxInvalid { box-shadow: 0px 0px 10px rgba(255,0,0,0.5), inset 0px -2px 5px rgba(255,255,255,1), inset 0px 2px 5px rgba(0,0,0,0.5); border: solid 1px rgb(255,0,0); } -.textboxInvalid:focus{ - box-shadow: 0px 0px 10px rgba(255,0,0,0.5), inset 0px -2px 5px rgba(255,255,255,1), inset 0px 2px 5px rgba(0,0,0,0.5); - border: solid 1px black; -} + + .textboxInvalid:focus { + box-shadow: 0px 0px 10px rgba(255,0,0,0.5), inset 0px -2px 5px rgba(255,255,255,1), inset 0px 2px 5px rgba(0,0,0,0.5); + border: solid 1px black; + } -.button{ +.button { padding: 5px; box-shadow: 0px 0px 10px rgba(0,0,0,0.5), inset 0px 2px 5px rgba(255,255,255,1), inset 0px -2px 5px rgba(128,128,128,1); vertical-align: top; @@ -137,24 +148,57 @@ h3 { background-color: rgb(192,192,192); margin-left: 5px; } -.button:first-child{ - margin-left: 0; -} -.button:hover{ - background-color: rgb(220,220,220); -} -.button:active{ - background-color: rgb(220,220,220); - box-shadow: inset 0px 2px 5px rgba(255,255,255,1), inset 0px -2px 5px rgba(128,128,128,1); + + .button:first-child { + margin-left: 0; + } + + .button:hover { + background-color: rgb(220,220,220); + } + + .button:active { + background-color: rgb(220,220,220); + box-shadow: inset 0px 2px 5px rgba(255,255,255,1), inset 0px -2px 5px rgba(128,128,128,1); + } + +.width25pc { + width: 25%; } -.width25pc{ width: 25%; } -.width50pc{ width: 50%; } -.width75pc{ width: 75%; } -.width100pc{ width: 100%; } +.width50pc { + width: 50%; +} -.width70px {width: 70px; max-width: 100%; } -.width100px {width: 100px; max-width: 100%; } -.width150px {width: 150px; max-width: 100%; } -.width200px {width: 200px; max-width: 100%; } -.width300px {width: 300px; max-width: 100%; } \ No newline at end of file +.width75pc { + width: 75%; +} + +.width100pc { + width: 100%; +} + +.width70px { + width: 70px; + max-width: 100%; +} + +.width100px { + width: 100px; + max-width: 100%; +} + +.width150px { + width: 150px; + max-width: 100%; +} + +.width200px { + width: 200px; + max-width: 100%; +} + +.width300px { + width: 300px; + max-width: 100%; +} diff --git a/VAR.Focus.Web/Styles/05. Cards.css b/VAR.Focus.Web/Styles/05. Cards.css index 421f3bb..ae2bd8e 100644 --- a/VAR.Focus.Web/Styles/05. Cards.css +++ b/VAR.Focus.Web/Styles/05. Cards.css @@ -1,8 +1,9 @@ -.divBoard{ - position:relative; - height:100%; +.divBoard { + position: relative; + height: 100%; } -.divToolbox{ + +.divToolbox { position: absolute; background-color: rgb(127,127,255); box-shadow: 0 0 10px rgba(0,0,0,0.5); @@ -12,50 +13,51 @@ border-radius: 2px; } -.divToolbox .divTitle{ - font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; - font-size: 12px; - font-weight: bold; - text-align: center; - display: block; - height: 20px; - line-height: 20px; - background-color: rgb(0,0,128); - color: rgb(128,128,255); - border-radius: 3px; - margin-bottom: 5px; -} + .divToolbox .divTitle { + font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; + font-size: 12px; + font-weight: bold; + text-align: center; + display: block; + height: 20px; + line-height: 20px; + background-color: rgb(0,0,128); + color: rgb(128,128,255); + border-radius: 3px; + margin-bottom: 5px; + } -.divToolbox .divOverlay{ - opacity: 0; - background-color: rgb(127,127,255); - position: absolute; - top: 0; - left: 0; - right: 0; - height:30px; - -ms-touch-action: none; - touch-action: none; -} + .divToolbox .divOverlay { + opacity: 0; + background-color: rgb(127,127,255); + position: absolute; + top: 0; + left: 0; + right: 0; + height: 30px; + -ms-touch-action: none; + touch-action: none; + } -.divToolbox .btnToolbox{ - margin-top: 5px; - margin-right: 5px; - padding: 2px; - border:solid 1px rgb(0,0,128); - border-radius: 3px; - color: rgb(0,0,128); - background-color: transparent; - font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; - font-size: 12px; -} -.divToolbox .btnToolbox:hover{ - color: rgb(127,127,255); - background-color: rgb(0,0,128); -} + .divToolbox .btnToolbox { + margin-top: 5px; + margin-right: 5px; + padding: 2px; + border: solid 1px rgb(0,0,128); + border-radius: 3px; + color: rgb(0,0,128); + background-color: transparent; + font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; + font-size: 12px; + } + + .divToolbox .btnToolbox:hover { + color: rgb(127,127,255); + background-color: rgb(0,0,128); + } -.divCard{ +.divCard { position: absolute; background-color: rgb(255,255,0); box-shadow: 0 0 10px rgba(0,0,0,0.5); @@ -68,75 +70,80 @@ overflow: auto; } -.divCard .divTitle{ - padding-bottom: 5px; - padding-right: 44px; - font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; - font-size: 12px; - font-weight: bold; - text-align: center; -} -.divCard .divBody{ - font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; - font-size: 12px; -} + .divCard .divTitle { + padding-bottom: 5px; + padding-right: 44px; + font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; + font-size: 12px; + font-weight: bold; + text-align: center; + } -.divCard .divOverlay{ - opacity: 0; - background-color: rgb(255,255,0); - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - -ms-touch-action: none; - touch-action: none; -} + .divCard .divBody { + font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; + font-size: 12px; + } -.divCard .btnCard{ - margin-top: 5px; - margin-right: 5px; - padding: 2px; - border:solid 1px black; - border-radius: 3px; - color: black; - background-color: transparent; - font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; - font-size: 12px; -} -.divCard .btnCard:hover{ - color: yellow; - background-color: black; -} -.divCard .btnEdit{ - margin:0; - top: 4px; - position:absolute; - width:16px; - right: 24px; -} -.divCard .btnDelete { - margin:0; - top: 4px; - position:absolute; - width:16px; - right: 4px -} + .divCard .divOverlay { + opacity: 0; + background-color: rgb(255,255,0); + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + -ms-touch-action: none; + touch-action: none; + } -.divCard .txtTitle { - width:100%; - font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; - font-size: 12px; - background-color: transparent; - border:solid 1px black; - padding: 2px; -} -.divCard .txtBody { - min-height: 150px; - width:100%; - font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; - font-size: 12px; - background-color: transparent; - border:solid 1px black; - padding: 2px; -} + .divCard .btnCard { + margin-top: 5px; + margin-right: 5px; + padding: 2px; + border: solid 1px black; + border-radius: 3px; + color: black; + background-color: transparent; + font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; + font-size: 12px; + } + + .divCard .btnCard:hover { + color: yellow; + background-color: black; + } + + .divCard .btnEdit { + margin: 0; + top: 4px; + position: absolute; + width: 16px; + right: 24px; + } + + .divCard .btnDelete { + margin: 0; + top: 4px; + position: absolute; + width: 16px; + right: 4px; + } + + .divCard .txtTitle { + width: 100%; + font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; + font-size: 12px; + background-color: transparent; + border: solid 1px black; + padding: 2px; + } + + .divCard .txtBody { + min-height: 150px; + width: 100%; + font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif; + font-size: 12px; + background-color: transparent; + border: solid 1px black; + padding: 2px; + } diff --git a/VAR.Focus.Web/Styles/10. Chat.css b/VAR.Focus.Web/Styles/10. Chat.css index 0ab88f1..b959e03 100644 --- a/VAR.Focus.Web/Styles/10. Chat.css +++ b/VAR.Focus.Web/Styles/10. Chat.css @@ -11,11 +11,11 @@ right: 0; } -.divChatTitleBar{ +.divChatTitleBar { text-align: right; } -.titleChatNormal{ +.titleChatNormal { background-color: rgb(220,220,220); cursor: pointer; display: inline-block; @@ -24,12 +24,20 @@ } @keyframes alert { - 0% {background-color: red;} - 50% {background-color: rgb(220,220,220);} - 100% {background-color: red;} + 0% { + background-color: red; + } + + 50% { + background-color: rgb(220,220,220); + } + + 100% { + background-color: red; + } } -.titleChatAlert{ +.titleChatAlert { background-color: red; animation-name: alert; animation-duration: 1s; @@ -39,7 +47,8 @@ border-radius: 5px; padding: 5px; } -.titleChatDisconnected{ + +.titleChatDisconnected { color: rgb(64,64,64); background-color: rgb(220,220,220); cursor: pointer; @@ -56,7 +65,6 @@ border-radius: 5px; border: solid 1px black; box-shadow: inset 0px 0px 5px black; - } .messageRow, @@ -143,10 +151,12 @@ cursor: pointer; background-color: rgb(192,192,192); } -.chatButton:hover { - background-color: rgb(220,220,220); -} -.chatButton:active { - background-color: rgb(220,220,220); - box-shadow: inset 0px 2px 5px rgba(255,255,255,1), inset 0px -2px 5px rgba(128,128,128,1); -} + + .chatButton:hover { + background-color: rgb(220,220,220); + } + + .chatButton:active { + background-color: rgb(220,220,220); + box-shadow: inset 0px 2px 5px rgba(255,255,255,1), inset 0px -2px 5px rgba(128,128,128,1); + }