Commit bdc4719aafa05b4a83903f31814748fc365359b6
1 parent
c317a9f1d7
Exists in
master
and in
1 other branch
Cleaned up flashy.css a lil
Showing 1 changed file with 64 additions and 79 deletions Inline Diff
flashy.css
View file @
bdc4719
| .angucomplete-dropdown { | 1 | 1 | .angucomplete-dropdown { | |
| border-color: #ececec; | 2 | 2 | border-color: #ececec; | |
| border-width: 1px; | 3 | 3 | border-width: 1px; | |
| border-style: solid; | 4 | 4 | border-style: solid; | |
| border-radius: 2px; | 5 | 5 | border-radius: 2px; | |
| /*width: 250px;*/ | 6 | 6 | /*width: 250px;*/ | |
| padding: 6px; | 7 | 7 | padding: 6px; | |
| cursor: pointer; | 8 | 8 | cursor: pointer; | |
| z-index: 9999; | 9 | 9 | z-index: 9999; | |
| position: absolute; | 10 | 10 | position: absolute; | |
| /*top: 32px; | 11 | 11 | /*top: 32px; | |
| left: 0px; | 12 | 12 | left: 0px; | |
| */ | 13 | 13 | */ | |
| margin-top: -6px; | 14 | 14 | margin-top: -6px; | |
| background-color: #ffffff; | 15 | 15 | background-color: #ffffff; | |
| } | 16 | 16 | } | |
| 17 | 17 | |||
| .angucomplete-description { | 18 | 18 | .angucomplete-description { | |
| font-size: 14px; | 19 | 19 | font-size: 14px; | |
| } | 20 | 20 | } | |
| 21 | 21 | |||
| .angucomplete-row { | 22 | 22 | .angucomplete-row { | |
| padding: 5px; | 23 | 23 | padding: 5px; | |
| color: #000000; | 24 | 24 | color: #000000; | |
| margin-bottom: 4px; | 25 | 25 | margin-bottom: 4px; | |
| clear: both; | 26 | 26 | clear: both; | |
| } | 27 | 27 | } | |
| 28 | 28 | |||
| .angucomplete-selected-row { | 29 | 29 | .angucomplete-selected-row { | |
| background-color: #aaaaff; | 30 | 30 | background-color: #aaaaff; | |
| } | 31 | 31 | } | |
| 32 | 32 | |||
| .container .row { | 33 | 33 | .container .row { | |
| margin-left: 0; | 34 | 34 | margin-left: 0; | |
| margin-right: 0; | 35 | 35 | margin-right: 0; | |
| } | 36 | 36 | } | |
| 37 | 37 | |||
| ul.side-nav.fixed li { | 38 | 38 | .side-nav a { | |
| /*line-height: 30px;*/ | 39 | 39 | line-height: normal; | |
| /*font-weight:700;*/ | 40 | |||
| font-size:24px; | 41 | |||
| } | 42 | 40 | } | |
| 43 | 41 | |||
| ul.side-nav.fixed li a { | 44 | 42 | ul.side-nav.fixed li { | |
| /*line-height: 30px;*/ | 45 | |||
| /*font-weight:700;*/ | 46 | |||
| font-size:24px; | 47 | 43 | font-size:24px; | |
| } | 48 | 44 | } | |
| 49 | 45 | |||
| ul.side-nav.fixed li.class a{ | 50 | 46 | ul.side-nav.fixed li.class a{ | |
| font-size:24px; | 51 | 47 | font-size:24px; | |
| height: 36px; | 52 | 48 | height: 36px; | |
| } | 53 | 49 | } | |
| 54 | 50 | |||
| ul.side-nav.fixed li ul li { | 55 | |||
| /*line-height: 30px;*/ | 56 | |||
| /*font-weight:700;*/ | 57 | |||
| margin-left:20px; | 58 | |||
| } | 59 | |||
| 60 | ||||
| ul.side-nav.fixed li a { | 61 | 51 | ul.side-nav.fixed li a { | |
| /*line-height: 30px;*/ | 62 | |||
| /*font-weight:700;*/ | 63 | |||
| font-size:24px; | 64 | 52 | font-size:24px; | |
| } | 65 | 53 | } | |
| 66 | 54 | |||
| 55 | ul.side-nav.fixed li ul li { | |||
| 56 | margin-left:20px; | |||
| 57 | } | |||
| 58 | ||||
| /* Flashcard directive css */ | 67 | 59 | /* Flashcard directive css */ | |
| .card { | 68 | 60 | .card { | |
| word-wrap: break-word; | 69 | 61 | word-wrap: break-word; | |
| } | 70 | 62 | } | |
| 71 | 63 | |||
| .card.flashy { | 72 | 64 | .card.flashy { | |
| float: left; | 73 | 65 | float: left; | |
| height: calc(3*5vw); | 74 | 66 | height: calc(3*5vw); | |
| margin: 6px; | 75 | 67 | margin: 6px; | |
| max-height: calc(3*60px); | 76 | 68 | max-height: calc(3*60px); | |
| max-width: calc(5*60px); | 77 | 69 | max-width: calc(5*60px); | |
| min-height: calc(3*50px); | 78 | 70 | min-height: calc(3*50px); | |
| min-width: calc(5*50px); | 79 | 71 | min-width: calc(5*50px); | |
| min-height: calc(3*50px); | 80 | 72 | min-height: calc(3*50px); | |
| min-width: calc(5*50px); | 81 | 73 | min-width: calc(5*50px); | |
| width: calc(5*5vw); | 82 | 74 | width: calc(5*5vw); | |
| } | 83 | 75 | } | |
| 84 | 76 | |||
| .card-overlay { | 85 | 77 | .card-overlay { | |
| /* display: none; */ | 86 | 78 | height: calc(3*5vw); | |
| height: calc(3*5vw); | 87 | 79 | left: 0; | |
| left: 0; | 88 | 80 | max-height: calc(3*60px); | |
| max-height: calc(3*60px); | 89 | 81 | max-width: calc(5*60px); | |
| max-width: calc(5*60px); | 90 | 82 | min-height: calc(3*50px); | |
| min-height: calc(3*50px); | 91 | 83 | min-width: calc(5*50px); | |
| min-width: calc(5*50px); | 92 | 84 | opacity: 0; | |
| opacity: 0; | 93 | 85 | position: absolute; | |
| position: absolute; | 94 | 86 | top: 0; | |
| top: 0; | 95 | 87 | transition: visibility 0s cubic-bezier(0,0,0.6,1) 0.2s, | |
| transition: visibility 0s cubic-bezier(0,0,0.6,1) 0.2s, | 96 | 88 | opacity 0.2s cubic-bezier(0,0,0.6,1); | |
| opacity 0.2s cubic-bezier(0,0,0.6,1); | 97 | 89 | /* animation effect to appear on off-hover */ | |
| /* animation effect to appear on off-hover */ | 98 | 90 | visibility: hidden; | |
| visibility: hidden; | 99 | 91 | width: calc(5*5vw); | |
| width: calc(5*5vw); | 100 | |||
| } | 101 | 92 | } | |
| 102 | 93 | |||
| .card-overlay i { | 103 | 94 | .card-overlay i { | |
| color: #FFF; | 104 | 95 | color: #FFF; | |
| left: 50%; | 105 | 96 | left: 50%; | |
| position: absolute; | 106 | 97 | position: absolute; | |
| top: 50%; | 107 | 98 | top: 50%; | |
| transform: translate(-50%, -50%); | 108 | 99 | transform: translate(-50%, -50%); | |
| } | 109 | 100 | } | |
| 110 | 101 | |||
| .card:hover .card-overlay { | 111 | 102 | .card:hover .card-overlay { | |
| opacity: 1; | 112 | 103 | opacity: 1; | |
| transition-delay: 0s; /* animation effect to appear on hover */ | 113 | 104 | transition-delay: 0s; /* animation effect to appear on hover */ | |
| visibility: visible; | 114 | 105 | visibility: visible; | |
| } | 115 | 106 | } | |
| 116 | 107 | |||
| .top-box { | 117 | 108 | .top-box { | |
| background-color: rgba(0,10,203,0.6); | 118 | 109 | background-color: rgba(0,10,203,0.6); | |
| height: 65%; | 119 | 110 | height: 65%; | |
| position: relative; | 120 | 111 | position: relative; | |
| transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s; | 121 | 112 | transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s; | |
| width: 100%; | 122 | 113 | width: 100%; | |
| } | 123 | 114 | } | |
| 124 | 115 | |||
| .top-box:hover { | 125 | 116 | .top-box:hover { | |
| background-color: rgba(0,10,203,0.7); | 126 | 117 | background-color: rgba(0,10,203,0.7); | |
| } | 127 | 118 | } | |
| 128 | 119 | |||
| .bottom-box { | 129 | 120 | .bottom-box { | |
| height: 35%; | 130 | 121 | height: 35%; | |
| width: 100%; | 131 | 122 | width: 100%; | |
| } | 132 | 123 | } | |
| 133 | 124 | |||
| .left-box { | 134 | 125 | .left-box { | |
| background-color: rgba(15,0,155,0.6); | 135 | 126 | background-color: rgba(15,0,155,0.6); | |
| float: left; | 136 | 127 | float: left; | |
| position: relative; | 137 | 128 | position: relative; | |
| height: 100%; | 138 | 129 | height: 100%; | |
| transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s; | 139 | 130 | transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s; | |
| width: 50%; | 140 | 131 | width: 50%; | |
| } | 141 | 132 | } | |
| 142 | 133 | |||
| .left-box:hover { | 143 | 134 | .left-box:hover { | |
| background-color: rgba(15,0,155,0.7); | 144 | 135 | background-color: rgba(15,0,155,0.7); | |
| } | 145 | 136 | } | |
| 146 | 137 | |||
| .right-box { | 147 | 138 | .right-box { | |
| background-color: rgba(0,81,189,0.6); | 148 | 139 | background-color: rgba(0,81,189,0.6); | |
| float: right; | 149 | 140 | float: right; | |
| height: 100%; | 150 | 141 | height: 100%; | |
| position: relative; | 151 | 142 | position: relative; | |
| transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s; | 152 | 143 | transition: all 0.2s cubic-bezier(0,0,0.6,1) 0s; | |
| width: 50%; | 153 | 144 | width: 50%; | |
| } | 154 | 145 | } | |
| .right-box:hover { | 155 | 146 | .right-box:hover { | |
| background-color: rgba(0,81,189,0.7); | 156 | 147 | background-color: rgba(0,81,189,0.7); | |
| } | 157 | 148 | } | |
| 158 | 149 | |||
| .center-me { | 159 | 150 | .center-me { | |
| margin: 0 auto; | 160 | 151 | margin: 0 auto; | |
| text-align: center; | 161 | 152 | text-align: center; | |
| vertical-align: center; | 162 | 153 | vertical-align: center; | |
| } | 163 | |||
| 164 | ||||
| .container { | 165 | |||
| /*position: relative; | 166 | |||
| width: 600px; | 167 | |||
| height: 80px;*/ | 168 | |||
| } | 169 | 154 | } | |
| 170 | 155 | |||
| .modal.bottom-sheet { | 171 | 156 | .modal.bottom-sheet { | |
| width: 40%; | 172 | 157 | width: 40%; | |
| margin-left: auto; | 173 | 158 | margin-left: auto; | |
| margin-right: auto; | 174 | 159 | margin-right: auto; | |
| } | 175 | 160 | } | |
| 176 | 161 | |||
| /* label color */ | 177 | 162 | /* label color */ | |
| .input-field label { | 178 | 163 | .input-field label { | |
| color: #673ab7; | 179 | 164 | color: #673ab7; | |
| } | 180 | 165 | } | |
| 181 | 166 | |||
| /* label focus color */ | 182 | 167 | /* label focus color */ | |
| .input-field input[type]:focus + label { | 183 | 168 | .input-field input[type]:focus + label { | |
| color: #b388ff; | 184 | 169 | color: #b388ff; | |
| } | 185 | 170 | } | |
| 186 | 171 | |||
| /* label underline focus color */ | 187 | 172 | /* label underline focus color */ | |
| .input-field input[type]:focus { | 188 | 173 | .input-field input[type]:focus { | |
| border-bottom: 1px solid #b388ff; | 189 | 174 | border-bottom: 1px solid #b388ff; | |
| box-shadow: 0 1px 0 0 #b388ff; | 190 | 175 | box-shadow: 0 1px 0 0 #b388ff; | |
| } | 191 | 176 | } | |
| 192 | 177 | |||
| /* valid color */ | 193 | 178 | /* valid color */ | |
| .input-field input[type].valid { | 194 | 179 | .input-field input[type].valid { | |
| border-bottom: 1px solid #673ab7; | 195 | 180 | border-bottom: 1px solid #673ab7; | |
| box-shadow: 0 1px 0 0 #673ab7; | 196 | 181 | box-shadow: 0 1px 0 0 #673ab7; | |
| } | 197 | 182 | } | |
| 198 | 183 | |||
| /* invalid color */ | 199 | 184 | /* invalid color */ | |
| .input-field input[type].invalid { | 200 | 185 | .input-field input[type].invalid { | |
| border-bottom: 1px solid #673ab7; | 201 | 186 | border-bottom: 1px solid #673ab7; | |
| box-shadow: 0 1px 0 0 #673ab7; | 202 | 187 | box-shadow: 0 1px 0 0 #673ab7; | |
| } | 203 | 188 | } | |
| 204 | 189 | |||
| /* icon prefix focus color */ | 205 | 190 | /* icon prefix focus color */ | |
| .input-field .prefix.active { | 206 | 191 | .input-field .prefix.active { | |
| color: #b388ff; | 207 | 192 | color: #b388ff; | |
| } | 208 | 193 | } | |
| 209 | 194 | |||
| /* label focus color */ | 210 | 195 | /* label focus color */ | |
| .input-field textarea[type]:focus + label { | 211 | 196 | .input-field textarea[type]:focus + label { | |
| color: #b388ff; | 212 | 197 | color: #b388ff; | |
| } | 213 | 198 | } | |
| 214 | 199 | |||
| /* label underline focus color */ | 215 | 200 | /* label underline focus color */ | |
| .input-field textarea[type]:focus { | 216 | 201 | .input-field textarea[type]:focus { | |
| border-bottom: 1px solid #b388ff; | 217 | 202 | border-bottom: 1px solid #b388ff; | |
| box-shadow: 0 1px 0 0 #b388ff; | 218 | 203 | box-shadow: 0 1px 0 0 #b388ff; | |
| } | 219 | 204 | } | |
| 220 | 205 | |||
| body { | 221 | 206 | body { | |
| background-color: #3e1944; | 222 | 207 | background-color: #3e1944; | |
| } | 223 | 208 | } | |
| 224 | 209 | |||
| .btn { | 225 | 210 | .btn { | |
| background-color: #673ab7; | 226 | 211 | background-color: #673ab7; | |
| } | 227 | 212 | } | |
| 228 | 213 | |||
| .btn:hover { | 229 | 214 | .btn:hover { | |
| background-color: #7c4dff; | 230 | 215 | background-color: #7c4dff; | |
| } | 231 | 216 | } | |
| 232 | 217 | |||
| .btn-floating { | 233 | 218 | .btn-floating { | |
| background-color: #673ab7; | 234 | 219 | background-color: #673ab7; | |
| } | 235 | 220 | } | |
| 236 | 221 | |||
| .btn-floating:hover { | 237 | 222 | .btn-floating:hover { | |
| background-color: #7c4dff; | 238 | 223 | background-color: #7c4dff; | |
| } | 239 | 224 | } | |
| 240 | 225 | |||