mirror of
https://github.com/ether/etherpad-lite.git
synced 2025-04-25 09:56:15 -04:00
Feat/admin react (#6211)
* Added vite react admin ui. * Added react i18next. * Added pads manager. * Fixed docker build. * Fixed windows build. * Fixed installOnWindows script. * Install only if path exists.
This commit is contained in:
SamTV12345
GitHub
parent
d34b964cc2
commit
db46ffb63b
112 changed files with 3327 additions and 946 deletions
489
admin/src/index.css
Normal file
489
admin/src/index.css
Normal file
|
|
@ -0,0 +1,489 @@
|
|||
:root {
|
||||
--etherpad-color: #0f775b;
|
||||
}
|
||||
|
||||
|
||||
|
||||
html, body, #root {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font: 14px helvetica, sans-serif;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
div.menu {
|
||||
height: 100%;
|
||||
padding: 15px;
|
||||
width: 220px;
|
||||
border-right: 1px solid #ccc;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
div.menu ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
div.menu li {
|
||||
list-style: none;
|
||||
margin-left: 3px;
|
||||
line-height: 3;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
div.menu li:last-child {
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
div.innerwrapper {
|
||||
padding: 15px;
|
||||
padding-left: 265px;
|
||||
}
|
||||
|
||||
div.innerwrapper-err {
|
||||
padding: 15px;
|
||||
padding-left: 265px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
background: none repeat scroll 0px 0px #FFFFFF;
|
||||
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
|
||||
margin: auto;
|
||||
max-width: 1150px;
|
||||
min-height: 100%;/*always display a scrollbar*/
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 29px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 10px 0;
|
||||
height: 1px;
|
||||
background: #aaa;
|
||||
background: -webkit-linear-gradient(left, #fff, #aaa 20%, #aaa 80%, #fff);
|
||||
background: -moz-linear-gradient(left, #fff, #aaa 20%, #aaa 80%, #fff);
|
||||
background: -ms-linear-gradient(left, #fff, #aaa 20%, #aaa 80%, #fff);
|
||||
background: -o-linear-gradient(left, #fff, #aaa 20%, #aaa 80%, #fff);
|
||||
}
|
||||
|
||||
form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
input {
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
.sort {
|
||||
cursor: pointer;
|
||||
}
|
||||
.sort:after {
|
||||
content: '▲▼'
|
||||
}
|
||||
.sort.up:after {
|
||||
content:'▲'
|
||||
}
|
||||
.sort.down:after {
|
||||
content:'▼'
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
position:relative; /* Allows us to position the loading indicator relative to the table */
|
||||
}
|
||||
|
||||
table thead tr {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#installed-plugins td>div {
|
||||
position: relative;/* Allows us to position the loading indicator relative to this row */
|
||||
display: inline-block; /*make this fill the whole cell*/
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.messages {
|
||||
height: 5em;
|
||||
}
|
||||
.messages * {
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
.messages .fetching {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom:0; right:0;
|
||||
padding: auto;
|
||||
|
||||
background: rgb(255,255,255);
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search-progress.progress {
|
||||
padding-top: 20%;
|
||||
background: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.progress * {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.settings {
|
||||
outline: none;
|
||||
width: 100%;
|
||||
min-height: 80vh;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
#response {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
a:link, a:visited, a:hover, a:focus {
|
||||
color: #333333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:focus, a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.installed-results a:link,
|
||||
.search-results a:link,
|
||||
.installed-results a:visited,
|
||||
.search-results a:visited,
|
||||
.installed-results a:hover,
|
||||
.search-results a:hover,
|
||||
.installed-results a:focus,
|
||||
.search-results a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.installed-results a:focus,
|
||||
.search-results a:focus,
|
||||
.installed-results a:hover,
|
||||
.search-results a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
div.innerwrapper {
|
||||
padding: 0 15px 15px 15px;
|
||||
}
|
||||
|
||||
div.menu {
|
||||
padding: 1px 15px 0 15px;
|
||||
position: static;
|
||||
height: auto;
|
||||
border-right: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
border: none;
|
||||
}
|
||||
|
||||
table, thead, tbody, td, tr {
|
||||
display: block;
|
||||
}
|
||||
|
||||
thead tr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tr {
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
td {
|
||||
border: none;
|
||||
border-bottom: 1px solid #eee;
|
||||
position: relative;
|
||||
padding-left: 50%;
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td.name {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
td:before {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
text-align: left;
|
||||
padding-right: 10px;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
content: attr(data-label);
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
table input[type="button"] {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.settings-button-bar {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.login-background {
|
||||
background-image: url("/fond.jpg");
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
.login-textinput {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #fffacc;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
width: 20%;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.login-inner-box{
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
color: var(--etherpad-color);
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
padding: 10px;
|
||||
background-color: var(--etherpad-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.dialog-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: white;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
||||
.dialog-confirm-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
||||
.dialog-confirm-content {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background-color: white;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 20px;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
|
||||
.dialog-content {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 20px;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
color: var(--etherpad-color);
|
||||
font-size: 2em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ToastViewport {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 390px;
|
||||
max-width: 100vw;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
z-index: 2147483647;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ToastRootSuccess {
|
||||
background-color: lawngreen;
|
||||
}
|
||||
|
||||
.ToastRootFailure {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.ToastRootFailure > .ToastTitle {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ToastRoot {
|
||||
border-radius: 20px;
|
||||
box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
|
||||
padding: 15px;
|
||||
display: grid;
|
||||
grid-template-areas: 'title action' 'description action';
|
||||
grid-template-columns: auto max-content;
|
||||
column-gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
.ToastRoot[data-state='open'] {
|
||||
animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.ToastRoot[data-state='closed'] {
|
||||
animation: hide 100ms ease-in;
|
||||
}
|
||||
.ToastRoot[data-swipe='move'] {
|
||||
transform: translateX(var(--radix-toast-swipe-move-x));
|
||||
}
|
||||
.ToastRoot[data-swipe='cancel'] {
|
||||
transform: translateX(0);
|
||||
transition: transform 200ms ease-out;
|
||||
}
|
||||
.ToastRoot[data-swipe='end'] {
|
||||
animation: swipeOut 100ms ease-out;
|
||||
}
|
||||
|
||||
@keyframes hide {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(calc(100% + var(--viewport-padding)));
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swipeOut {
|
||||
from {
|
||||
transform: translateX(var(--radix-toast-swipe-end-x));
|
||||
}
|
||||
to {
|
||||
transform: translateX(calc(100% + var(--viewport-padding)));
|
||||
}
|
||||
}
|
||||
|
||||
.ToastTitle {
|
||||
grid-area: title;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
color: var(--slate-12);
|
||||
padding: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.ToastDescription {
|
||||
grid-area: description;
|
||||
margin: 0;
|
||||
color: var(--slate-11);
|
||||
font-size: 13px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.ToastAction {
|
||||
grid-area: action;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 20px
|
||||
}
|
||||
|
||||
.search-field {
|
||||
width: 50%;
|
||||
padding: 5px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue