styles.css

main 131 lines · 2.5 KB Raw
Alex Alex Commit Client Upload Part 2 19/10/2026 00:06
1body {
2 font-family: Arial, sans-serif;
3 margin: 0;
4 padding: 50px;
5 background-color: #f9f9f9;
6}
7
8.editor-container {
9 display: flex;
10 flex-direction: column;
11 max-width: 800px;
12 margin: 0 auto;
13 gap: 20px;
14}
15
16.tab {
17 display: flex;
18 justify-content: center;
19}
20
21.tab button {
22 background-color: #007BFF;
23 color: white;
24 border: none;
25 padding: 10px 20px;
26 cursor: pointer;
27 transition: background-color 0.3s;
28 border-radius: 5px;
29}
30
31.tab button:hover {
32 background-color: #0056b3;
33}
34
35.tabcontent {
36 padding: 10px;
37 background-color: black;
38 border-radius: 5px;
39 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
40 color: white;
41}
42
43h1, h2 {
44 text-align: center;
45}
46
47.entry-fields {
48 display: flex;
49 justify-content: center;
50 align-items: center;
51 margin-bottom: 10px;
52 gap: 10px;
53}
54
55.entry-fields input {
56 width: 80px;
57 padding: 5px;
58 border: 1px solid #ccc;
59 border-radius: 3px;
60}
61
62.offset-fields {
63 display: flex;
64 justify-content: center;
65 gap: 20px;
66 flex-wrap: wrap;
67 margin-top: 10px;
68}
69
70.offset-group {
71 display: flex;
72 flex-direction: column;
73 align-items: center;
74}
75
76.offset-group label {
77 margin-bottom: 5px;
78}
79
80.offset-group input {
81 width: 60px;
82}
83
84.entry {
85 margin-bottom: 10px;
86 white-space: pre-wrap; /* Mantener el formato de los espacios */
87}
88
89.editor-section {
90 text-align: center;
91}
92
93button {
94 padding: 10px 15px;
95 background-color: #28a745;
96 color: white;
97 border: none;
98 border-radius: 5px;
99 cursor: pointer;
100 transition: background-color 0.3s;
101}
102
103button:hover {
104 background-color: #218838;
105}
106
107<script>
108function openTab(evt, tabName) {
109 var i, tabcontent, tablinks;
110 tabcontent = document.getElementsByClassName("tabcontent");
111 for (i = 0; i < tabcontent.length; i++) {
112 tabcontent[i].style.display = "none";
113 }
114 tablinks = document.getElementsByClassName("tablinks");
115 for (i = 0; i < tablinks.length; i++) {
116 tablinks[i].className = tablinks[i].className.replace(" active", "");
117 }
118 document.getElementById(tabName).style.display = "block";
119 evt.currentTarget.className += " active";
120}
121
122// Abre la primera pestaña por defecto
123document.addEventListener('DOMContentLoaded', function() {
124 var firstTab = document.getElementsByClassName("tablinks")[0];
125 if (firstTab) {
126 firstTab.click();
127 }
128});
129</script>
130
131```
Top