html {
background: #000;
color-scheme: dark;
}
body {
background: #000;
color: white;
}
button,
input,
textarea {
color-scheme: dark;
}
:root {
--background: #000000;
--surface: #111111;
--text: #ffffff;
--border: #2c2c2c;
--hover: #222222;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--background);
color: var(--text);
font-family: Arial, Helvetica, sans-serif;
}
/* ===== ОБЛАКО ===== */
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 24px;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.topbar h1 {
display: flex;
align-items: center;
margin: 0;
font-size: 28px;
}
.title-icon {
width: 30px;
height: 30px;
margin-right: 10px;
}
.container {
padding: 20px;
}
.toolbar {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.back-button {
display: flex;
align-items: left;
justify-content: flex-start;
gap: 10px;
width: 170px;
height: 45px;
padding-left: 15px;
font-size: 18px;
font-weight: 600;
background: #1f1f1f;
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
}
.path {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.path a {
color: #4b82f2;
text-decoration: none;
}
.current-folder {
font-weight: bold;
}
.file-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.file-item {
width: 100%;
display: flex;
align-items: center;
padding: 16px;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: 12px;
font-size: 17px;
cursor: pointer;
text-align: left;
}
.file-item:hover {
background: var(--hover);
}
.icon {
width: 22px;
height: 22px;
margin-right: 12px;
}
/* ===== ВХОД ===== */
.login-page {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.login-container {
width: 100%;
max-width: 520px;
background: var(--surface);
padding: 45px;
border-radius: 24px;
border: 1px solid var(--border);
}
.logo {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.logo img {
width: 48px;
height: 48px;
}
.logo h1 {
margin: 0;
font-size: 38px;
}
.login-container h2 {
text-align: center;
font-size: 30px;
margin-top: 35px;
margin-bottom: 30px;
}
.roles {
display: flex;
flex-direction: column;
gap: 16px;
}
.role {
width: 100%;
padding: 20px;
border-radius: 16px;
border: 1px solid var(--border);
background: var(--background);
color: var(--text);
font-size: 20px;
cursor: pointer;
}
.role:hover {
background: var(--hover);
}
input[type="password"] {
width: 100%;
margin-top: 25px;
padding: 18px;
border-radius: 16px;
border: 1px solid var(--border);
background: var(--background);
color: var(--text);
font-size: 18px;
}
.login-button {
width: 100%;
margin-top: 22px;
padding: 18px;
border-radius: 16px;
border: none;
background: #4b82f2;
color: white;
font-size: 20px;
cursor: pointer;
}
/* ===== ТЕЛЕФОН ===== */
@media (max-width: 700px) {
.topbar {
flex-direction: column;
gap: 10px;
}
.container {
padding: 12px;
}
.toolbar {
flex-direction: column;
align-items: stretch;
}
.back-button {
width: 100%;
justify-content: left;
}
.file-item {
font-size: 18px;
padding: 18px;
}
.login-container {
padding: 30px;
}
.logo img {
width: 40px;
height: 40px;
}
.logo h1 {
font-size: 30px;
}
}
.role.selected {
border: 2px solid #4b82f2;
background: var(--hover);
}
.back-button {
align-items: center !important;
}
.back-button img {
display: block;
width: 22px;
height: 22px;
}
.back-button {
line-height: 1;
}
#file-menu {
margin-top: 20px;
width: 280px;
padding: 18px;
background: #111;
border-radius: 18px;
color: white;
}
#file-menu h3 {
margin: 0 0 15px 0;
font-size: 18px;
}
#file-menu button {
width: 100%;
height: 45px;
margin-top: 10px;
border: none;
border-radius: 12px;
background: #252525;
color: white;
font-size: 16px;
}
#file-menu button:active {
background: #333;
}
#file-menu {
margin-top: 24px;
width: 320px;
background: #1b1b1b;
border: 1px solid #2c2c2c;
border-radius: 18px;
padding: 20px;
box-sizing: border-box;
}
#file-menu h3 {
margin: 0 0 18px 0;
color: white;
font-size: 20px;
font-weight: 600;
word-break: break-word;
}
#file-menu button {
width: 100%;
height: 52px;
margin-top: 12px;
border: none;
border-radius: 14px;
background: #2a2a2a;
color: white;
font-size: 17px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
#file-menu button:hover {
background: #3a3a3a;
}
#file-menu button:active {
background: #505050;
}
#file-menu {
position: relative;
}
.close-menu {
position: absolute;
top: 10px;
right: 10px;
width: 34px !important;
height: 34px !important;
margin: 0 !important;
padding: 0;
border: none;
border-radius: 50%;
background: transparent !important;
color: white;
font-size: 24px;
line-height: 34px;
cursor: pointer;
}
.close-menu:hover {
background: #3a3a3a !important;
}
.video-player {
position: relative;
width: 100%;
height: calc(100vh - 100px);
background: black;
border-radius: 20px;
overflow: hidden;
}
.video-player video {
width: 100%;
height: 100%;
object-fit: contain;
}
.video-controls {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.video-controls button {
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
background: rgba(0,0,0,0.6);
color: white;
font-size: 24px;
}
.video-back {
position: absolute;
top: 20px;
left: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
background: rgba(0,0,0,0.6);
color: white;
font-size: 28px;
z-index: 5;
}
.icon,
.title-icon {
filter: brightness(0) invert(1);
}
.viewer-image {
max-width: 100%;
max-height: calc(100vh - 120px);
width: auto;
height: auto;
object-fit: contain;
display: block;
margin: 0 auto;
}
.viewer-container {
width: 100%;
min-height: calc(100vh - 100px);
}
.video-player {
width: 100%;
height: calc(100vh - 120px);
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.video-player video {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.delete-mode {
border: 2px solid #ff4444 !important;
background: rgba(255, 68, 68, 0.15) !important;
}