/* style switcher */ #style_switcher { position: fixed; right: 0; top: 140px; background: #fff; width: 240px; z-index: 1094; box-sizing: border-box; padding: 16px; margin-right: -246px; -webkit-transition: margin 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: margin 280ms cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.26); } #style_switcher.switcher_active { margin-right: 0; } #style_switcher .switcher_app_themes { margin: 0; padding: 0; list-style: none; overflow: hidden; } #style_switcher .switcher_app_themes > li { padding: 0; margin: 0; list-style: none; } #style_switcher .switcher_app_themes li { float: left; cursor: pointer; width: 36px; margin: 0 16px 16px 0; opacity: 0.5; -webkit-transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1); } #style_switcher .switcher_app_themes li span { display: block; padding: 0 4px; height: 24px; line-height: 24px; box-sizing: border-box; width: 50%; float: left; } #style_switcher .switcher_app_themes li.active_theme { opacity: 1; position: relative; } #style_switcher .switcher_app_themes li.active_theme:after { position: absolute; top: 0; left: 50%; content: '\e5ca'; font-family: "Material Icons"; font-size: 18px; display: block; color: #fff; margin-left: -8px; } #style_switcher .switcher_app_themes li.app_style_default .app_color_main { background: #2196f3; } #style_switcher .switcher_app_themes li.app_style_default .app_color_accent { background: #7cb342; } #style_switcher .switcher_app_themes li.switcher_theme_a .app_color_main { background: #3f51b5; } #style_switcher .switcher_app_themes li.switcher_theme_a .app_color_accent { background: #ff4081; } #style_switcher .switcher_app_themes li.switcher_theme_b .app_color_main { background: #673ab7; } #style_switcher .switcher_app_themes li.switcher_theme_b .app_color_accent { background: #00bcd4; } #style_switcher .switcher_app_themes li.switcher_theme_c .app_color_main { background: #5d4037; } #style_switcher .switcher_app_themes li.switcher_theme_c .app_color_accent { background: #1e88e5; } #style_switcher .switcher_app_themes li.switcher_theme_d .app_color_main { background: #00acc1; } #style_switcher .switcher_app_themes li.switcher_theme_d .app_color_accent { background: #673ab7; } #style_switcher .switcher_app_themes li.switcher_theme_e .app_color_main { background: #607d8b; } #style_switcher .switcher_app_themes li.switcher_theme_e .app_color_accent { background: #e53935; } #style_switcher .switcher_app_themes li.switcher_theme_f .app_color_main { background: #424242; } #style_switcher .switcher_app_themes li.switcher_theme_f .app_color_accent { background: #7cb342; } #style_switcher .switcher_app_themes li.switcher_theme_g .app_color_main { background: #8e24aa; } #style_switcher .switcher_app_themes li.switcher_theme_g .app_color_accent { background: #4caf50; } #style_switcher .switcher_app_themes li.switcher_theme_h .app_color_main { background: #d32f2f; } #style_switcher .switcher_app_themes li.switcher_theme_h .app_color_accent { background: #0277bd; } #style_switcher .switcher_app_themes li.switcher_theme_i .app_color_main { background: #fbc02d; } #style_switcher .switcher_app_themes li.switcher_theme_i .app_color_accent { background: #00acc1; } #style_switcher .switcher_app_themes li.switcher_theme_dark .app_color_main { background: #546e7a; } #style_switcher .switcher_app_themes li.switcher_theme_dark .app_color_accent { background: #009688; } #style_switcher_toggle { position: absolute; top: 8px; left: -44px; width: 44px; height: 36px; background: #fff; border-radius: 4px 0 0 4px; cursor: pointer; padding: 0 8px; box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.26); box-sizing: border-box; z-index: 1096; } #style_switcher_toggle .material-icons { font-size: 24px; line-height: 36px; color: #212121; } .app_theme_dark #style_switcher, .app_theme_dark #style_switcher_toggle { background: #424242; } .app_theme_dark #style_switcher_toggle .material-icons { color: #cbcbcb; }