78 أسطر
2.0 KiB
CSS
78 أسطر
2.0 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400,500,600,700&display=swap');
|
|
|
|
:root {
|
|
/* Red Color Scheme from 404 page */
|
|
--primary-red: #e53935;
|
|
--dark-red: #c62828;
|
|
--light-red: #ff5252;
|
|
--accent-red: #ff8a80;
|
|
|
|
/* Background and text colors */
|
|
--body-bg: linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);
|
|
--border: 1px solid rgba(229, 57, 53, 0.2);
|
|
--border-radius: 8px;
|
|
|
|
/* Main containers */
|
|
--msger-width: 800px;
|
|
--msger-height: 700px;
|
|
--msger-bubble-width: 85%;
|
|
--msger-bg: #ffffff;
|
|
--box-shadow: 0 8px 32px rgba(229, 57, 53, 0.1);
|
|
|
|
/* Whiteboard */
|
|
--wb-width: 800px;
|
|
--wb-height: 600px;
|
|
--wb-bg: #ffffff;
|
|
|
|
/* Selection and messages */
|
|
--select-bg: #f8f9fa;
|
|
--left-msg-bg: #f1f3f4;
|
|
--right-msg-bg: var(--primary-red);
|
|
--private-msg-bg: var(--dark-red);
|
|
|
|
/* Buttons and interactive elements */
|
|
--btns-bg-color: var(--primary-red);
|
|
--btns-hover-scale: scale(1.05);
|
|
--settings-bg: #ffffff;
|
|
--tab-btn-active: rgba(229, 57, 53, 0.1);
|
|
|
|
/* Button bars positioning */
|
|
--btns-top: 50%;
|
|
--btns-right: 0%;
|
|
--btns-left: 20px;
|
|
--btns-margin-left: 0px;
|
|
--btns-width: 60px;
|
|
--btns-flex-direction: column;
|
|
|
|
/* Bottom buttons bar */
|
|
--bottom-btns-top: auto;
|
|
--bottom-btns-left: 50%;
|
|
--bottom-btns-bottom: 0;
|
|
--bottom-btns-translate-X: -50%;
|
|
--bottom-btns-translate-Y: 0%;
|
|
--bottom-btns-margin-bottom: 20px;
|
|
--bottom-btns-flex-direction: row;
|
|
|
|
/* Transcription */
|
|
--transcription-height: 680px;
|
|
--transcription-width: 420px;
|
|
--trx-bg: #ffffff;
|
|
|
|
/* Editor */
|
|
--editor-container-width: 100%;
|
|
--editor-container-height: 100%;
|
|
--editor-height: 85vh;
|
|
|
|
/* Video */
|
|
--vmi-wh: 15vw;
|
|
--videoObjFit: cover;
|
|
--videoBar-active: 2px solid var(--primary-red);
|
|
|
|
/* Dropdown and text */
|
|
--dd-color: #333333;
|
|
}
|
|
|
|
* {
|
|
outline: none;
|
|
font-family: 'IBM Plex Sans', sans-serif;
|
|
} |