styles.css (5233B)
1 .rtf { 2 box-sizing: border-box; 3 margin: 25px; 4 position: fixed; 5 white-space: nowrap; 6 z-index: 9998; 7 padding-left: 0; 8 list-style: none; } 9 .rtf.open .rtf--mb > * { 10 transform-origin: center center; 11 transform: none; 12 transition: ease-in-out transform 0.2s; } 13 .rtf.open .rtf--mb > ul { 14 list-style: none; 15 margin: 0; 16 padding: 0; } 17 .rtf.open .rtf--ab__c:hover > span { 18 transition: ease-in-out opacity 0.2s; 19 opacity: 0.9; } 20 .rtf.open .rtf--ab__c > span.always-show { 21 transition: ease-in-out opacity 0.2s; 22 opacity: 0.9; } 23 .rtf.open .rtf--ab__c:nth-child(1) { 24 transform: translateY(-60px) scale(1); 25 transition-delay: 0.03s; } 26 .rtf.open .rtf--ab__c:nth-child(1).top { 27 transform: translateY(60px) scale(1); } 28 .rtf.open .rtf--ab__c:nth-child(2) { 29 transform: translateY(-120px) scale(1); 30 transition-delay: 0.09s; } 31 .rtf.open .rtf--ab__c:nth-child(2).top { 32 transform: translateY(120px) scale(1); } 33 .rtf.open .rtf--ab__c:nth-child(3) { 34 transform: translateY(-180px) scale(1); 35 transition-delay: 0.12s; } 36 .rtf.open .rtf--ab__c:nth-child(3).top { 37 transform: translateY(180px) scale(1); } 38 .rtf.open .rtf--ab__c:nth-child(4) { 39 transform: translateY(-240px) scale(1); 40 transition-delay: 0.15s; } 41 .rtf.open .rtf--ab__c:nth-child(4).top { 42 transform: translateY(240px) scale(1); } 43 .rtf.open .rtf--ab__c:nth-child(5) { 44 transform: translateY(-300px) scale(1); 45 transition-delay: 0.18s; } 46 .rtf.open .rtf--ab__c:nth-child(5).top { 47 transform: translateY(300px) scale(1); } 48 .rtf.open .rtf--ab__c:nth-child(6) { 49 transform: translateY(-360px) scale(1); 50 transition-delay: 0.21s; } 51 .rtf.open .rtf--ab__c:nth-child(6).top { 52 transform: translateY(360px) scale(1); } 53 54 .rtf--mb__c { 55 padding: 25px; 56 margin: -25px; } 57 .rtf--mb__c *:last-child { 58 margin-bottom: 0; } 59 .rtf--mb__c:hover > span { 60 transition: ease-in-out opacity 0.2s; 61 opacity: 0.9; } 62 .rtf--mb__c > span.always-show { 63 transition: ease-in-out opacity 0.2s; 64 opacity: 0.9; } 65 .rtf--mb__c > span { 66 opacity: 0; 67 transition: ease-in-out opacity 0.2s; 68 position: absolute; 69 top: 50%; 70 transform: translateY(-50%); 71 margin-right: 6px; 72 margin-left: 4px; 73 background: rgba(0, 0, 0, 0.75); 74 padding: 2px 4px; 75 border-radius: 2px; 76 color: #fff; 77 font-size: 13px; 78 box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); } 79 .rtf--mb__c > span.right { 80 right: 100%; } 81 82 .rtf--mb { 83 height: 56px; 84 width: 56px; 85 z-index: 9999; 86 background-color: #666; 87 display: inline-flex; 88 justify-content: center; 89 align-items: center; 90 position: relative; 91 border: none; 92 border-radius: 50%; 93 box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); 94 cursor: pointer; 95 outline: none; 96 padding: 0; 97 -webkit-user-drag: none; 98 font-weight: bold; 99 color: #f1f1f1; 100 font-size: 18px; } 101 .rtf--mb > * { 102 transition: ease-in-out transform 0.2s; } 103 104 .rtf--ab__c { 105 display: block; 106 position: absolute; 107 top: 0; 108 right: 1px; 109 padding: 10px 0; 110 margin: -10px 0; 111 transition: ease-in-out transform 0.2s; } 112 .rtf--ab__c > span { 113 opacity: 0; 114 transition: ease-in-out opacity 0.2s; 115 position: absolute; 116 top: 50%; 117 transform: translateY(-50%); 118 margin-right: 6px; 119 background: rgba(0, 0, 0, 0.75); 120 padding: 2px 4px; 121 border-radius: 2px; 122 color: #fff; 123 font-size: 13px; 124 box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); } 125 .rtf--ab__c > span.right { 126 right: 100%; } 127 .rtf--ab__c:nth-child(1) { 128 transform: translateY(-60px) scale(0); 129 transition-delay: 0.21s; } 130 .rtf--ab__c:nth-child(1).top { 131 transform: translateY(60px) scale(0); } 132 .rtf--ab__c:nth-child(2) { 133 transform: translateY(-120px) scale(0); 134 transition-delay: 0.18s; } 135 .rtf--ab__c:nth-child(2).top { 136 transform: translateY(120px) scale(0); } 137 .rtf--ab__c:nth-child(3) { 138 transform: translateY(-180px) scale(0); 139 transition-delay: 0.15s; } 140 .rtf--ab__c:nth-child(3).top { 141 transform: translateY(180px) scale(0); } 142 .rtf--ab__c:nth-child(4) { 143 transform: translateY(-240px) scale(0); 144 transition-delay: 0.12s; } 145 .rtf--ab__c:nth-child(4).top { 146 transform: translateY(240px) scale(0); } 147 .rtf--ab__c:nth-child(5) { 148 transform: translateY(-300px) scale(0); 149 transition-delay: 0.09s; } 150 .rtf--ab__c:nth-child(5).top { 151 transform: translateY(300px) scale(0); } 152 .rtf--ab__c:nth-child(6) { 153 transform: translateY(-360px) scale(0); 154 transition-delay: 0.03s; } 155 .rtf--ab__c:nth-child(6).top { 156 transform: translateY(360px) scale(0); } 157 158 .rtf--ab { 159 height: 48px; 160 width: 48px; 161 background-color: #aaa; 162 display: inline-flex; 163 justify-content: center; 164 align-items: center; 165 position: relative; 166 border: none; 167 border-radius: 50%; 168 box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); 169 cursor: pointer; 170 outline: none; 171 padding: 0; 172 -webkit-user-drag: none; 173 font-weight: bold; 174 color: #f1f1f1; 175 margin-right: 4px; 176 font-size: 16px; 177 z-index: 10000; } 178 179 /*# sourceMappingURL=styles.css.map */