aboutsummaryrefslogtreecommitdiffhomepage
path: root/assets/default/scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/default/scss')
-rw-r--r--assets/default/scss/shaarli.scss199
1 files changed, 197 insertions, 2 deletions
diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss
index a528adb0..cc8ccc1e 100644
--- a/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@@ -139,6 +139,16 @@ body,
139 } 139 }
140} 140}
141 141
142.page-form,
143.pure-alert {
144 code {
145 display: inline-block;
146 padding: 0 2px;
147 color: $dark-grey;
148 background-color: var(--background-color);
149 }
150}
151
142// Make pure-extras alert closable. 152// Make pure-extras alert closable.
143.pure-alert-closable { 153.pure-alert-closable {
144 .fa-times { 154 .fa-times {
@@ -671,6 +681,10 @@ body,
671 content: ''; 681 content: '';
672 } 682 }
673 } 683 }
684
685 .search-highlight {
686 background-color: yellow;
687 }
674} 688}
675 689
676.linklist-item-buttons { 690.linklist-item-buttons {
@@ -1019,6 +1033,10 @@ body,
1019 &.button-red { 1033 &.button-red {
1020 background: $red; 1034 background: $red;
1021 } 1035 }
1036
1037 &.button-grey {
1038 background: $light-grey;
1039 }
1022 } 1040 }
1023 1041
1024 .submit-buttons { 1042 .submit-buttons {
@@ -1043,7 +1061,7 @@ body,
1043 } 1061 }
1044 1062
1045 table { 1063 table {
1046 margin: auto; 1064 margin: 10px auto 25px auto;
1047 width: 90%; 1065 width: 90%;
1048 1066
1049 .order { 1067 .order {
@@ -1079,6 +1097,11 @@ body,
1079 position: absolute; 1097 position: absolute;
1080 right: 5%; 1098 right: 5%;
1081 } 1099 }
1100
1101 &.button-grey {
1102 position: absolute;
1103 left: 5%;
1104 }
1082 } 1105 }
1083 } 1106 }
1084 } 1107 }
@@ -1253,11 +1276,15 @@ form {
1253 margin: 70px 0 25px; 1276 margin: 70px 0 25px;
1254 } 1277 }
1255 1278
1279 a {
1280 color: var(--main-color);
1281 }
1282
1256 pre { 1283 pre {
1257 margin: 0 20%; 1284 margin: 0 20%;
1258 padding: 20px 0; 1285 padding: 20px 0;
1259 text-align: left; 1286 text-align: left;
1260 line-height: .7em; 1287 line-height: 1em;
1261 } 1288 }
1262} 1289}
1263 1290
@@ -1269,6 +1296,57 @@ form {
1269 } 1296 }
1270} 1297}
1271 1298
1299.loading-input {
1300 position: relative;
1301
1302 @keyframes around {
1303 0% {
1304 transform: rotate(0deg);
1305 }
1306
1307 100% {
1308 transform: rotate(360deg);
1309 }
1310 }
1311
1312 .icon-container {
1313 position: absolute;
1314 right: 60px;
1315 top: calc(50% - 10px);
1316 }
1317
1318 .loader {
1319 position: relative;
1320 height: 20px;
1321 width: 20px;
1322 display: inline-block;
1323 animation: around 5.4s infinite;
1324
1325 &::after,
1326 &::before {
1327 content: "";
1328 background: $form-input-background;
1329 position: absolute;
1330 display: inline-block;
1331 width: 100%;
1332 height: 100%;
1333 border-width: 2px;
1334 border-color: #333 #333 transparent transparent;
1335 border-style: solid;
1336 border-radius: 20px;
1337 box-sizing: border-box;
1338 top: 0;
1339 left: 0;
1340 animation: around 0.7s ease-in-out infinite;
1341 }
1342
1343 &::after {
1344 animation: around 0.7s ease-in-out 0.1s infinite;
1345 background: transparent;
1346 }
1347 }
1348}
1349
1272// LOGIN 1350// LOGIN
1273.login-form-container { 1351.login-form-container {
1274 .remember-me { 1352 .remember-me {
@@ -1641,6 +1719,123 @@ form {
1641 } 1719 }
1642} 1720}
1643 1721
1722// SERVER PAGE
1723
1724.server-tables-page,
1725.server-tables {
1726 .window-subtitle {
1727 &::before {
1728 display: block;
1729 margin: 8px auto;
1730 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
1731 width: 50%;
1732 height: 1px;
1733 content: '';
1734 }
1735 }
1736
1737 .server-row {
1738 p {
1739 height: 25px;
1740 padding: 0 10px;
1741 }
1742 }
1743
1744 .server-label {
1745 text-align: right;
1746 font-weight: bold;
1747 }
1748
1749 i {
1750 &.fa-color-green {
1751 color: $main-green;
1752 }
1753
1754 &.fa-color-orange {
1755 color: $orange;
1756 }
1757
1758 &.fa-color-red {
1759 color: $red;
1760 }
1761 }
1762
1763 @media screen and (max-width: 64em) {
1764 .server-label {
1765 text-align: center;
1766 }
1767
1768 .server-row {
1769 p {
1770 text-align: center;
1771 }
1772 }
1773 }
1774}
1775
1776// Batch creation
1777input[name='save_edit_batch'] {
1778 @extend %page-form-button;
1779}
1780
1781.addlink-batch-show-more {
1782 display: flex;
1783 align-items: center;
1784 margin: 20px 0 8px;
1785
1786 a {
1787 color: var(--main-color);
1788 text-decoration: none;
1789 }
1790
1791 &::before,
1792 &::after {
1793 content: "";
1794 flex-grow: 1;
1795 background: rgba(0, 0, 0, 0.35);
1796 height: 1px;
1797 font-size: 0;
1798 line-height: 0;
1799 }
1800
1801 &::before {
1802 margin: 0 16px 0 0;
1803 }
1804
1805 &::after {
1806 margin: 0 0 0 16px;
1807 }
1808}
1809
1810.dark-layer {
1811 display: none;
1812 position: fixed;
1813 height: 100%;
1814 width: 100%;
1815 z-index: 998;
1816 background-color: rgba(0, 0, 0, .75);
1817 color: #fff;
1818
1819 .screen-center {
1820 display: flex;
1821 flex-direction: column;
1822 justify-content: center;
1823 align-items: center;
1824 text-align: center;
1825 min-height: 100vh;
1826 }
1827
1828 .progressbar {
1829 width: 33%;
1830 }
1831}
1832
1833.addlink-batch-form-block {
1834 .pure-alert {
1835 margin: 25px 0 0 0;
1836 }
1837}
1838
1644// Print rules 1839// Print rules
1645@media print { 1840@media print {
1646 .shaarli-menu { 1841 .shaarli-menu {