diff options
Diffstat (limited to 'dist/mac')
| -rw-r--r-- | dist/mac/css/all.css | 759 |
1 files changed, 740 insertions, 19 deletions
diff --git a/dist/mac/css/all.css b/dist/mac/css/all.css index 63b0ed8..3909594 100644 --- a/dist/mac/css/all.css +++ b/dist/mac/css/all.css @@ -547,6 +547,11 @@ body { background-color: #fff; } +.window.dark { + background-color: #2F3231; + color: white; +} + .window-vibrant { position: absolute; top: 0; @@ -757,6 +762,13 @@ h6 { border-bottom: 1px solid #c2c0c2; } +.dark .titlebar { + background-color: #000000; + background-image: linear-gradient(to right, #4A4D4C 0%, #3F4141 100%); + box-shadow: inset 0 1px 0 #000000; + border-bottom: 1px solid #000000; +} + .titlebar:before, .titlebar:after { display: table; content: " "; @@ -774,6 +786,11 @@ h6 { border-top: 1px solid #c2c0c2; } +.dark .statusbar { + border-top: 1px solid #595B5A; + border-bottom: 1px solid #595B5A; +} + .window-title { margin: 0; font-size: 12px; @@ -785,6 +802,10 @@ h6 { top: 3px; } +.dark .window-title { + color: white; +} + /* Toolbars */ .toolbars-borderless { @@ -819,7 +840,7 @@ h6 { .button { display: inline-block; - padding: 3px 8px; + padding: 2px 8px; margin-bottom: 0; font-size: 12px; line-height: 1.4; @@ -840,14 +861,6 @@ h6 { box-shadow: none; } -.button-mini { - padding: 2px 6px; -} - -.button-large { - padding: 6px 12px; -} - .button-form { padding-right: 20px; padding-left: 20px; @@ -865,11 +878,28 @@ h6 { background-image: linear-gradient(to bottom, #fcfcfc 0%, #f1f1f1 100%); } +.dark .button-default { + color: #FFFFFF; + border-top-color: #535353; + border-right-color: #535353; + border-bottom-color: #535353; + border-left-color: #535353; + background-color: #5D5D5D; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5D5D5D), color-stop(100%, #5D5D5D)); + background-image: -webkit-linear-gradient(top, #5D5D5D 0%, #5D5D5D 100%); + background-image: linear-gradient(to bottom, #5D5D5D 0%, #5D5D5D 100%); +} + .button-default:active { background-color: #ddd; background-image: none; } +.dark .button-default:active { + background-color: #898C8B; + background-image: none; +} + .button-blue { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); @@ -884,6 +914,15 @@ h6 { background-image: linear-gradient(to bottom, #6eb4f7 0%, #1a82fb 100%); } +.dark .button-blue { + border-color: #1769E6; + border-bottom-color: #155FCF; + background-color: #1769E6; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1769E6), color-stop(100%, #155FCF)); + background-image: -webkit-linear-gradient(top, #1769E6 0%, #155FCF 100%); + background-image: linear-gradient(to bottom, #1769E6 0%, #155FCF 100%); +} + .button-blue:active { background-color: #3e9bf4; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9bf4), color-stop(100%, #0469de)); @@ -902,6 +941,17 @@ h6 { line-height: 1; } +.dark .button i { + float: left; + width: 14px; + height: 14px; + margin-top: 1px; + margin-bottom: 1px; + color: #FFFFFF; + font-size: 14px; + line-height: 1; +} + .button .icon-text { margin-left: 0px; margin-right: 3px; @@ -978,6 +1028,13 @@ h6 { background-image: none; } +.dark .button-group .button-active { + color: #434646; + border: 1px solid transparent; + background-color: #CFD2D2; + background-image: none; +} + .button-active { color: #fff; border: 1px solid transparent; @@ -985,6 +1042,13 @@ h6 { background-image: none; } +.dark .button-active { + color: #434646; + border: 1px solid transparent; + background-color: #CFD2D2; + background-image: none; +} + .button-active i { color: #fff; } @@ -993,6 +1057,14 @@ h6 { color: #fff; } +.dark .button-active i { + color: #434646; +} + +.dark .button-group .button-active i { + color: #434646; +} + /* Dropdown Menu */ .dropdown { @@ -1015,6 +1087,11 @@ h6 { border: solid 1px #B6B6B6; } +.dark .dropdown-content { + background-color: #282828; + border: solid 1px #484848; +} + .dropdown-overflow { transform: translateX(-115px); } @@ -1027,6 +1104,14 @@ h6 { font-size: 13px; } +.dark .dropdown-content a { + color: white; + padding: 2.5px 16px; + text-decoration: none; + display: block; + font-size: 13px; +} + .dropdown a:hover { background-color: #0670F5; color: white; @@ -1034,7 +1119,6 @@ h6 { .showDropdown { display: block; - ; } .dropdown-divider { @@ -1043,6 +1127,12 @@ h6 { margin: 3px 0px 3px 0px; } +.dark .dropdown-divider { + height: 2px; + background-color: #4C4C4C; + margin: 3px 0px 3px 0px; +} + /* Box Layout */ .box-layout { @@ -1055,12 +1145,18 @@ h6 { position: relative; } -.boxed { - - /* For adding to content only */ +.dark .box-layout { + background-color: #474A49; + border: solid 1px #5D605F; +} +.boxed { + /* For adding to content only */ background-color: #ECECEC; +} +.dark .boxed { + background-color: #424443; } /* Context Menu - Future Planned */ @@ -1105,6 +1201,10 @@ h6 { background-color: #f5f5f4; } +.dark .sidebar { + background-color: #3B3E3D; +} + .sidebar-transparent { background-color: transparent; } @@ -1148,10 +1248,18 @@ h6 { font-weight: 400; } +.dark .nav-group .item { + color: #fff; +} + .nav-group .item:active, .nav-group .item.active { background-color: #CED1D0; } +.dark .nav-group .item:active, .dark .nav-group .item.active { + background-color: #5F6261; +} + .nav-group .item .icon { width: 20px; height: 20px; @@ -1163,6 +1271,10 @@ h6 { text-align: center; } +.dark .nav-group .item .icon { + color: #B1B4B3; +} + .nav-group .title { margin: 0; padding: 10px 10px 4px 10px; @@ -1172,6 +1284,10 @@ h6 { color: #777978; } +.dark .nav-group .title { + color: #B1B4B3; +} + /* Image View */ .imageview { @@ -1257,14 +1373,26 @@ thead { background-color: #F0F0F0; } +.dark thead { + background-color: #3E4240; +} + tbody { background-color: #fff; } +.dark tbody { + background-color: #383B3A; +} + .table-striped tr:nth-child(even) { background-color: #F4F5F5; } +.dark .table-striped tr:nth-child(even) { + background-color: #2E3130; +} + tr:active, .table-striped tr:active:nth-child(even) { color: #fff; background-color: #116cd6; @@ -1280,6 +1408,11 @@ thead tr:active { background-color: #f5f5f4; } +.dark thead tr:active { + background-color: #333; + color: #f5f5f4; +} + th { font-size: 11px; font-weight: 500; @@ -1304,7 +1437,14 @@ td>img { top: 2px; } -.iconed i { + +.iconed>td:first-child { + padding-left: 16px !important; +} + +.iconed>td:first-child::before { + font-family: "entypo"; + content: '\e885'; font-size: 22px; color: #7A7A7A; line-height: 0px; @@ -1313,8 +1453,15 @@ td>img { top: 3px; } -.iconed>td:first-child { - padding-left: 16px !important; +.dark .iconed>td:first-child::before { + font-family: "entypo"; + content: '\e885'; + font-size: 22px; + color: #ffffff; + line-height: 0px; + margin-right: 10px; + position: relative; + top: 3px; } td { @@ -1358,6 +1505,11 @@ th:last-child, td:last-child { border-top: 1px solid #ddd; } +.dark .list .item { + color: #ffffff; + border-top: 1px solid #000000; +} + .list .item:first-child { border-top: 0; } @@ -1430,11 +1582,21 @@ input[type="radio"], input[type="checkbox"] { outline: none; } +.dark .form-control { + background-color: #323232; + border: 1px solid #3F3F3F; +} + .form-control:focus { border-color: #4E84D6; box-shadow: 0 0 0 3px #7EA1E4; } +.dark .form-control:focus { + border-color: #2A668C; + box-shadow: 0 0 0 3px #2A668C; +} + .form-group { margin-bottom: 10px; } @@ -1488,6 +1650,10 @@ textarea { border-radius: 4px; } +.dark .tabview { + background-color: #717372; +} + .tabitem { display: inline-block; vertical-align: middle; @@ -1499,6 +1665,11 @@ textarea { border-left: solid 1px #E5E5E5; } +.dark .tabitem { + border: solid 1px #3B3D3C; + border-left: solid 1px #5F6160; +} + .tabitem { position: relative; float: left; @@ -1512,23 +1683,59 @@ textarea { border-right: solid 1px #C9C9C9; } +.dark .tabitem:last-child { + border-right: solid 1px #3B3D3C; +} + .tabitem:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; + border-left: solid 1px #C9C9C9; +} +.dark .tabitem:first-child { + border-left: solid 1px #3B3D3C; } .tabitem:not(:first-child):not(:last-child) { border-radius: 0; } -.tabitem.active { - border: solid 1px #4A8FF7; +.tabitem.active:not(:first-child) { + border-top: solid 1px #C9C9C9; + border-bottom: solid 1px #C9C9C9; + border-left: none; + border-right: none; background-image: linear-gradient(to bottom, #69A2F8 0%, #116DF6 100%); color: white; } +.tabitem.active:first-child { + border-top: solid 1px #C9C9C9; + border-bottom: solid 1px #C9C9C9; + border-right: none; + background-image: linear-gradient(to bottom, #69A2F8 0%, #116DF6 100%); + color: white; +} + +.dark .tabitem.active:not(:first-child) { + border-top: solid 1px #3B3D3C; + border-bottom: solid 1px #3B3D3C; + border-left: none; + border-right: none; + background-image: linear-gradient(to bottom, #1769E6 0%, #155ECE 100%); + color: white; +} + +.dark .tabitem.active:first-child { + border-top: solid 1px #3B3D3C; + border-bottom: solid 1px #3B3D3C; + border-right: none; + background-image: linear-gradient(to bottom, #1769E6 0%, #155ECE 100%); + color: white; +} + /* .tabitem { display: inline-block; background-color: #fff; @@ -1599,6 +1806,11 @@ progress.three-quarter { background: linear-gradient(to right, #EDEDED 50%, #777777 50%); } +.dark .progress-circle { + border: solid 1px #EDEDED; + background: linear-gradient(to right, #777777 50%, #EDEDED 50%); +} + .progress-circle:before { border-radius: 0 100% 100% 0 / 50%; content: ''; @@ -2114,13 +2326,518 @@ progress.three-quarter { transform: rotate(180deg); } +.dark .progress-0:before { + background: #777; + transform: rotate(0deg); +} + +.dark .progress-1:before { + background: #777; + transform: rotate(3.6deg); +} + +.dark .progress-2:before { + background: #777; + transform: rotate(7.2deg); +} + +.dark .progress-3:before { + background: #777; + transform: rotate(10.8deg); +} + +.dark .progress-4:before { + background: #777; + transform: rotate(14.4deg); +} + +.dark .progress-5:before { + background: #777; + transform: rotate(18deg); +} + +.dark .progress-6:before { + background: #777; + transform: rotate(21.6deg); +} + +.dark .progress-7:before { + background: #777; + transform: rotate(25.2deg); +} + +.dark .progress-8:before { + background: #777; + transform: rotate(28.8deg); +} + +.dark .progress-9:before { + background: #777; + transform: rotate(32.4deg); +} + +.dark .progress-10:before { + background: #777; + transform: rotate(36deg); +} + +.dark .progress-11:before { + background: #777; + transform: rotate(39.6deg); +} + +.dark .progress-12:before { + background: #777; + transform: rotate(43.2deg); +} + +.dark .progress-13:before { + background: #777; + transform: rotate(46.8deg); +} + +.dark .progress-14:before { + background: #777; + transform: rotate(50.4deg); +} + +.dark .progress-15:before { + background: #777; + transform: rotate(54deg); +} + +.dark .progress-16:before { + background: #777; + transform: rotate(57.6deg); +} + +.dark .progress-17:before { + background: #777; + transform: rotate(61.2deg); +} + +.dark .progress-18:before { + background: #777; + transform: rotate(64.8deg); +} + +.dark .progress-19:before { + background: #777; + transform: rotate(68.4deg); +} + +.dark .progress-20:before { + background: #777; + transform: rotate(72deg); +} + +.dark .progress-21:before { + background: #777; + transform: rotate(75.6deg); +} + +.dark .progress-22:before { + background: #777; + transform: rotate(79.2deg); +} + +.dark .progress-23:before { + background: #777; + transform: rotate(82.8deg); +} + +.dark .progress-24:before { + background: #777; + transform: rotate(86.4deg); +} + +.dark .progress-25:before { + background: #777; + transform: rotate(90deg); +} + +.dark .progress-26:before { + background: #777; + transform: rotate(93.6deg); +} + +.dark .progress-27:before { + background: #777; + transform: rotate(97.2deg); +} + +.dark .progress-28:before { + background: #777; + transform: rotate(100.8deg); +} + +.dark .progress-29:before { + background: #777; + transform: rotate(104.4deg); +} + +.dark .progress-30:before { + background: #777; + transform: rotate(108deg); +} + +.dark .progress-31:before { + background: #777; + transform: rotate(111.6deg); +} + +.dark .progress-32:before { + background: #777; + transform: rotate(115.2deg); +} + +.dark .progress-33:before { + background: #777; + transform: rotate(118.8deg); +} + +.dark .progress-34:before { + background: #777; + transform: rotate(122.4deg); +} + +.dark .progress-35:before { + background: #777; + transform: rotate(126deg); +} + +.dark .progress-36:before { + background: #777; + transform: rotate(129.6deg); +} + +.dark .progress-37:before { + background: #777; + transform: rotate(133.2deg); +} + +.dark .progress-38:before { + background: #777; + transform: rotate(136.8deg); +} + +.dark .progress-39:before { + background: #777; + transform: rotate(140.4deg); +} + +.dark .progress-40:before { + background: #777; + transform: rotate(144deg); +} + +.dark .progress-41:before { + background: #777; + transform: rotate(147.6deg); +} + +.dark .progress-42:before { + background: #777; + transform: rotate(151.2deg); +} + +.dark .progress-43:before { + background: #777; + transform: rotate(154.8deg); +} + +.dark .progress-44:before { + background: #777; + transform: rotate(158.4deg); +} + +.dark .progress-45:before { + background: #777; + transform: rotate(162deg); +} + +.dark .progress-46:before { + background: #777; + transform: rotate(165.6deg); +} + +.dark .progress-47:before { + background: #777; + transform: rotate(169.2deg); +} + +.dark .progress-48:before { + background: #777; + transform: rotate(172.8deg); +} + +.dark .progress-49:before { + background: #777; + transform: rotate(176.4deg); +} + +.dark .progress-50:before { + background: #777; + transform: rotate(180deg); +} + +.dark .progress-51:before { + background: #EDEDED; + transform: rotate(3.6deg); +} + +.dark .progress-52:before { + background: #EDEDED; + transform: rotate(7.2deg); +} + +.dark .progress-53:before { + background: #EDEDED; + transform: rotate(10.8deg); +} + +.dark .progress-54:before { + background: #EDEDED; + transform: rotate(14.4deg); +} + +.dark .progress-55:before { + background: #EDEDED; + transform: rotate(18deg); +} + +.dark .progress-56:before { + background: #EDEDED; + transform: rotate(21.6deg); +} + +.dark .progress-57:before { + background: #EDEDED; + transform: rotate(25.2deg); +} + +.dark .progress-58:before { + background: #EDEDED; + transform: rotate(28.8deg); +} + +.dark .progress-59:before { + background: #EDEDED; + transform: rotate(32.4deg); +} + +.dark .progress-60:before { + background: #EDEDED; + transform: rotate(36deg); +} + +.dark .progress-61:before { + background: #EDEDED; + transform: rotate(39.6deg); +} + +.dark .progress-62:before { + background: #EDEDED; + transform: rotate(43.2deg); +} + +.dark .progress-63:before { + background: #EDEDED; + transform: rotate(46.8deg); +} + +.dark .progress-64:before { + background: #EDEDED; + transform: rotate(50.4deg); +} + +.dark .progress-65:before { + background: #EDEDED; + transform: rotate(54deg); +} + +.dark .progress-66:before { + background: #EDEDED; + transform: rotate(57.6deg); +} + +.dark .progress-67:before { + background: #EDEDED; + transform: rotate(61.2deg); +} + +.dark .progress-68:before { + background: #EDEDED; + transform: rotate(64.8deg); +} + +.dark .progress-69:before { + background: #EDEDED; + transform: rotate(68.4deg); +} + +.dark .progress-70:before { + background: #EDEDED; + transform: rotate(72deg); +} + +.dark .progress-71:before { + background: #EDEDED; + transform: rotate(75.6deg); +} + +.dark .progress-72:before { + background: #EDEDED; + transform: rotate(79.2deg); +} + +.dark .progress-73:before { + background: #EDEDED; + transform: rotate(82.8deg); +} + +.dark .progress-74:before { + background: #EDEDED; + transform: rotate(86.4deg); +} + +.dark .progress-75:before { + background: #EDEDED; + transform: rotate(90deg); +} + +.dark .progress-76:before { + background: #EDEDED; + transform: rotate(93.6deg); +} + +.dark .progress-77:before { + background: #EDEDED; + transform: rotate(97.2deg); +} + +.dark .progress-78:before { + background: #EDEDED; + transform: rotate(100.8deg); +} + +.dark .progress-79:before { + background: #EDEDED; + transform: rotate(104.4deg); +} + +.dark .progress-80:before { + background: #EDEDED; + transform: rotate(108deg); +} + +.dark .progress-81:before { + background: #EDEDED; + transform: rotate(111.6deg); +} + +.dark .progress-82:before { + background: #EDEDED; + transform: rotate(115.2deg); +} + +.dark .progress-83:before { + background: #EDEDED; + transform: rotate(118.8deg); +} + +.dark .progress-84:before { + background: #EDEDED; + transform: rotate(122.4deg); +} + +.dark .progress-85:before { + background: #EDEDED; + transform: rotate(126deg); +} + +.dark .progress-86:before { + background: #EDEDED; + transform: rotate(129.6deg); +} + +.dark .progress-87:before { + background: #EDEDED; + transform: rotate(133.2deg); +} + +.dark .progress-88:before { + background: #EDEDED; + transform: rotate(136.8deg); +} + +.dark .progress-89:before { + background: #EDEDED; + transform: rotate(140.4deg); +} + +.dark .progress-90:before { + background: #EDEDED; + transform: rotate(144deg); +} + +.dark .progress-91:before { + background: #EDEDED; + transform: rotate(147.6deg); +} + +.dark .progress-92:before { + background: #EDEDED; + transform: rotate(151.2deg); +} + +.dark .progress-93:before { + background: #EDEDED; + transform: rotate(154.8deg); +} + +.dark .progress-94:before { + background: #EDEDED; + transform: rotate(158.4deg); +} + +.dark .progress-95:before { + background: #EDEDED; + transform: rotate(162deg); +} + +.dark .progress-96:before { + background: #EDEDED; + transform: rotate(165.6deg); +} + +.dark .progress-97:before { + background: #EDEDED; + transform: rotate(169.2deg); +} + +.dark .progress-98:before { + background: #EDEDED; + transform: rotate(172.8deg); +} + +.dark .progress-99:before { + background: #EDEDED; + transform: rotate(176.4deg); +} + +.dark .progress-100:before { + background: #EDEDED; + transform: rotate(180deg); +} + /* Indeterminate Progress Spinner */ .progress-spinner { display: inline-block; } -.progress-spinner > .spinner { +.progress-spinner>.spinner { height: 20px; position: relative; top: 11px; @@ -2188,6 +2905,10 @@ progress.three-quarter { border-left: 1px solid #ddd; } +.dark .pane { + border-left: 1px solid #000000; +} + .pane:first-child { border-left: 0; } |