/* General classes - set externally */ .yellow {color: yellow;} .maroon {color: maroon;} .hidden{display:none;} .chatControls {} .whenstopped {} .whenstarted {} .notice { border: 1px solid #222244; font-size: 32px; line-height: 50px; padding: 12px; color: black; background-color: #eeeeee; } .emoticon {font-size: 80px; line-height:100px;} #transparent-page { /* A transparent view back to the surroundings - OnClick to close the chat */ /* ALL MEDIA resizing atcs on chat-outer-container inner container chat-outer-container can be positioned and clicking on the area outside the inner container closes the chat to go back to the STILL VISIBLE main content - Chat panel is another hidden panel - See outer templates & core CSS for panels ; - When the chat panel is opened, the main panel is hidden */ position: absolute; left: 0; right: 0; top: 0; bottom: 0; /* transform: translate(-50%, -50%); */ /* Big screen chat not full width but check below for small screen. */ background: transparent; /* background: #d3fedf; */ } img.chat-avatar { width: 80px; border: 1px solid #000022; border-radius: 4px; } .chat-stacked { /* All sub areas of the outer container are stacked - SAME left & width */ position: relative; top: 0%; left: 1%; right: 1%; margin: 3px; width: 98%; } .chat-stacked details { color:black; } #chat-outer-container { /* Must be fixed to the whole view port */ position: fixed; z-index: 90; top: 0%; bottom: 0%; left: 0%; right: 2%; width: 98%; height: 100%; color: #ffffff; background: #eeeeff; } #chat-outer-stack { position: relative; z-index: 150; top: 0%; bottom: 0%; height: 100%; color: #ffffff; border: 4px solid grey; } .chat-stacked { background: #9bbadb; color: #000000; border: 2px; border-color: #aaaaad; padding: 8px; font-size: 22px; line-height: 30px; border-bottom: 2px solid #aaaaad; padding: 8px; text-align: center; } .highlighted { font-size: 35px; color: blue; background-color: white; padding: 20px; margin: 12px; border: 2px solid green; } #chat-stack-title { z-index: 500; position: relative; top: 1%; bottom: 86%; } #chat-stack-title { position: relative; height: 5%; } #chat-stack-footer { padding: 4px; padding-top: 12px; } /* /css/core/biscuits-chat.css */ /* Styles for chat interface, including chat-form.php popup */ #chat-msg-form-container { position: absolute; top: 20%; left: 3%; /* transform: translate(-50%, -50%);*/ background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); z-index: 1000; width: 95%; max-width: 95%; height: 50%; box-sizing: border-box; } @media (max-width: 767px) { #chat-msg-form-container { width: 95%; padding: 15px; } } #chat-pencil, #chat-score { z-index: 1200; position:absolute; /* to */ right: 70px; padding: 10px; border: 1px solid #46a; border-radius: 4px; box-shadow: 4px 4px 4px; font-size: 40px; color: #ffffff; background-color: #224455; /* background-color: transparent; */ } #chat-pencil:hover, #chat-score:hover { cursor: pointer; } #chat-pencil { bottom: 350px; } #chat-score { bottom: 200px; } /* .chat-form textarea#message-input { width: 100%; max-height: 120px; resize: vertical; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; box-sizing: border-box; } */ .chat-form input[type="submit"], .chat-form input[type="reset"], .chat-form a.button { display: inline-block; padding: 10px 20px; margin: 10px 5px 0 0; background: #007bff; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; touch-action: manipulation; text-decoration: none; } .chat-form input[type="reset"], .chat-form a.button { background: #6c757d; } .chat-form input[type="submit"]:hover, .chat-form input[type="reset"]:hover, .chat-form a.button:hover { opacity: 0.9; } .chat-form fieldset.hidden { display: none; } .chat-form fieldset.canshow { margin-top: 10px; } #message-input { display: inline; font-size: 20px; line-height: 26px; width: 55%; padding: 2px; margin: 3px; margin-left: 100px; /* room for fixed position SEND BUTTON */ } #chat-stack-inner { /* The inner container where messages are displayed */ z-index: 500; position: relative; top: 1%; height: 78%; background: #409cab; /* #000022; */ color: #fffaff; font-size: 16px; line-height: 20px; border-bottom: solid white 5px; overflow-y: scroll; /* let it scroll */ overflow-x: hidden; } #chat-stack-inner .paperback {color: #7c431e;} #chat-stack-inner p {padding: 3px;} #chat-stack-inner.chat-stack-inner-mobile { /* Stretch over the desktop chat footer area which mobiles don't use */ height: 85%; } #chat-stack-inner.waiting { background: #953f23; color: #eeffee; } #chat-stack-inner.chat-stopped {background-color: #147468; /* #3f5053; */} #chat-stack-inner.chat-private {background-color: #355e23} #chat-stack-inner.general { background-color: #fefedc;} #chat-stack-inner a {color: brown;} .chat-strip {font-size: 10px; width: 96%; background-color: white; color: brown; padding: 5px;} .chat-decorated { background-color: #00ffff; /* Legacy NOTICES posted to chat */} #chat-monitor-container { background-color: #ffffff; z-index: 2000;} #chat-monitor {font-size: 15px; color: black;} .chat-status-class { font-size: 15px; font-style: italic; } a.chat-status-class { background-color: #ffffff; padding: 5px; border-radius: 3px; } #chat-load-areas { /* Normally CLASS="hidden" but for testing heres a fat border! */ /* border: 1px solid gray; */ border-radius: 6px; margin: 5px; padding: 4px; } .chat-cruncher {float:right;color: #ee2222; font-size:30px;} .chat-form { color: black; background-color: #98d5d2; } .chat-form div { margin: 8px; float: right; margin-right: 50px; text-decoration:none; font-size: 40px; } #popup-container, .chat-popup { color: #800000; background-color: #bee5f2; position: fixed; top: 12%; bottom: 18%; left: 5%; right: 5%; /* height: 74%;*/ border: 5px solid #d3e7ec; border-radius: 6px; margin: 3px; z-index: 1000; padding: 20px; overflow-y: auto; } #popup-container.pop-mobile { /* The pop ups can have more space on mobile devices */ top: 5%; bottom: 5%; } #popup-container h1 { color: black; font-style: italic; } .robot-message { font-size: 20px; line-height: 30px; color: black; background-color: #1be4d6; border: 2px solid green; border-radius: 15px; margin: 30px; padding: 12px; } .robot-message p { } .chat-strip { font-size: 18px; line-height: 22px; color: black;} .my-message-container { margin-left: 5%; margin-right: 2%;} .incoming-message-container { margin-left: 2%; margin-right: 5%;} .chat-message-label { color: black; font-size: 10px; float: right; margin-right: 30px;} .chat-message-label a {font-size: 20px;} .chat-message-set { position: relative; padding-bottom: 4px; padding: 15px; margin: 1em 0; } .chat-message-text { background-color: #eeffff; font-weight: 400; font-size: 24px; line-height: 25px; margin: 15px; margin-left: 12px; margin-top: 20px; padding-top: 8px; } .chat-message-text:hover { text-decoration: none; cursor: pointer; } .command-message-container { margin-left: 10%; margin-right: 10%; } .command-message { border: rgba(17,50,81,0.39); /* border-radius: 9px 11px 10px 10px; */ background-color: #faf0ee; color: #000000; padding: 16px; margin:20px; box-shadow: 6px 6px 6px; } .my-message { border: 4px double rgba(67,70,81,0.39); border-radius: 9px 11px 10px 10px; background-color: #e5f2fe; color: #000000; } /* creates triangle */ .my-message:after { content: ""; display: block; position: absolute; bottom: -15px; left: 50px; width: 0; border-width: 15px 15px 0; border-style: solid; border-color: #e5f2fe transparent; } .incoming-message { /* The message part of a single message. (Not including the proceeding date stamp.) */ border: 4px double rgba(25,71,81,0.39); /* border-radius: 9px 11px 10px 10px; */ background-color: #f7efc9; /* #a0ddf6; /* #8ea6f6; */ border-color: #287828; color: #000000; } /* creates triangle */ .incoming-message:after { content: ""; display: block; /* reduce the damage in FF3.0 */ position: absolute; bottom: -15px; left: 50px; width: 0; border-width: 15px 15px 0; border-style: solid; border-color: #f7efc9 transparent; } .chat-username {color: #800000; font-weight: bold; font-style: italic; background: transparent; font-size: 18px; cursor:pointer;} .pm {/* Private message */ color: #8a004f; font-style: italic; border-radius: 10px;} .pm-notice { color: orange; background-color: white; font-style: italic; padding: 4px; border-radius: 8px;} .pnote { /* as note to myself */ background-color: #b3ccff; color: #002b80; padding: 4px; border: 5px double rgba(81,60,48,0.26);border-radius: 11px;} .delete-soon {border: 10px solid #ebe3ce;} .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black;} .tooltip .tooltiptext { visibility: hidden; width: 420px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 10; } .tooltip:hover .tooltiptext { visibility: visible;} .chatlightback { background-color: #ffdab3; color: #000000;} .chatdarkback { background-color: #c1caaf; color: #ffffdd; } .chat-heading { width:99%; height: 45px; font-weight: bold; font-size: 30px; line-height: 45px; text-align: center; padding: 8px; margin-right: 10px; background-color: #ccffcc; } .chat-new-message-count { background-color:red; /* you could use a background image if you'd like as well */ color:white; font-weight:bold; font-size:0.85em; margin-left: 30px; border-radius:5px; box-shadow:1px 1px 1px gray; } /* iPad Portrait */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) { .chat-stacked { left: 1%; width: 95%; } #chat-display-messages {width: 95%;} #chat-stack-form-container {width: 95%;} } /* iPad Landscape */ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) { #chat-stacked {left: 30%; top: 5%;} } /* SMALL SCREENS */ @media screen and (max-width: 44em) { .chat-stacked {left: 0; width: 99%;} }