返回提交历史
Modified
g4f/gui/client/static/css/style.css
+130
-14
XFEstudio/gpt4free
(g4f/gui/client/static/css/style.css): Enhance mobile responsiveness and fix layout issues
fd1d589c
代码差异
1 个文件
+130
-14
@@ -554,7 +554,6 @@ input-count .text {
554
554
555
555
.stop_generating, .toolbar .regenerate {
556
556
position: absolute;
557
z-index: 100000;
558
557
top: 0;
559
558
right: 0;
560
559
animation: show_popup 0.4s;
@@ -1108,23 +1107,21 @@ ul {
1108
1107
1109
1108
.mobile-sidebar {
1110
1109
display: none;
1111
position: absolute;
1112
z-index: 100000;
1113
top: 0;
1114
left: 0;
1115
margin: 10px;
1116
font-size: 20px;
1117
cursor: pointer;
1118
backdrop-filter: blur(20px);
1119
-webkit-backdrop-filter: blur(20px);
1120
background-color: var(--blur-bg);
1121
border-radius: 10px;
1122
border: 1px solid var(--blur-border);
1110
position: fixed;
1111
z-index: 1000;
1112
top: 10px;
1113
right: 10px;
1123
1114
width: 40px;
1124
1115
height: 40px;
1116
background-color: var(--blur-bg);
1117
border: 1px solid var(--blur-border);
1118
border-radius: 10px;
1119
backdrop-filter: blur(20px);
1120
-webkit-backdrop-filter: blur(20px);
1121
cursor: pointer;
1125
1122
justify-content: center;
1126
1123
align-items: center;
1127
transition: 0.33s;
1124
transition: all 0.3s ease;
1128
1125
}
1129
1126
1130
1127
.mobile-sidebar i {
@@ -1531,3 +1528,122 @@ form .field.saved .fa-xmark {
1531
1528
backdrop-filter: none;
1532
1529
}
1533
1530
}
1531
1532
1533
/* Basic adaptation */
1534
.row {
1535
flex-wrap: wrap;
1536
gap: 10px;
1537
}
1538
1539
.conversations, .settings, .conversation {
1540
flex: 1 1 300px;
1541
min-width: 0;
1542
}
1543
1544
/* Media queries for mobile devices */
1545
@media (max-width: 768px) {
1546
.row {
1547
flex-direction: column;
1548
}
1549
1550
.conversations, .settings {
1551
width: 100%;
1552
max-width: 100%;
1553
margin: 0;
1554
}
1555
1556
.conversation {
1557
order: -1;
1558
min-height: 80vh;
1559
}
1560
1561
.buttons .field {
1562
flex: 1 1 auto;
1563
}
1564
1565
#model, #provider {
1566
font-size: 14px;
1567
padding: 6px;
1568
}
1569
1570
.user-input .input-area {
1571
padding: 8px;
1572
}
1573
1574
textarea#message-input {
1575
font-size: 14px;
1576
}
1577
1578
.mobile-sidebar {
1579
display: block;
1580
position: fixed;
1581
top: 10px;
1582
left: 10px;
1583
z-index: 1000;
1584
}
1585
1586
.conversations {
1587
position: fixed;
1588
left: -100%;
1589
top: 0;
1590
bottom: 0;
1591
transition: left 0.3s;
1592
z-index: 999;
1593
background: var(--bg-color);
1594
}
1595
1596
.conversations.active {
1597
left: 0;
1598
}
1599
}
1600
1601
/* Flexible form elements */
1602
.user-input .input-area {
1603
display: flex;
1604
flex-wrap: wrap;
1605
gap: 8px;
1606
}
1607
1608
textarea {
1609
max-width: 100%;
1610
min-height: 50px;
1611
resize: vertical;
1612
}
1613
1614
/* Adaptive buttons */
1615
button {
1616
white-space: nowrap;
1617
overflow: hidden;
1618
text-overflow: ellipsis;
1619
}
1620
1621
.file-label {
1622
flex-shrink: 0;
1623
}
1624
1625
/* Adaptive model menu */
1626
#model, #provider {
1627
max-width: 150px;
1628
overflow: hidden;
1629
text-overflow: ellipsis;
1630
}
1631
1632
@media (max-width: 480px) {
1633
.buttons .field {
1634
flex: 1 1 100%;
1635
}
1636
1637
#model, #provider {
1638
max-width: 100%;
1639
}
1640
1641
.toolbar {
1642
flex-wrap: wrap;
1643
gap: 5px;
1644
}
1645
1646
.info .convo-title {
1647
font-size: 12px;
1648
}
1649
}