You are here

Home » API reference » Open Social 8.2

base.css in Open Social 8.2

Same filename in this branch
  1. 8.2 themes/socialblue/assets/css/base.css
  2. 8.2 themes/socialbase/assets/css/base.css
Same filename and directory in other branches
  1. 8.9 themes/socialblue/assets/css/base.css
  2. 8 themes/socialblue/assets/css/base.css
  3. 8.3 themes/socialblue/assets/css/base.css
  4. 8.4 themes/socialblue/assets/css/base.css
  5. 8.5 themes/socialblue/assets/css/base.css
  6. 8.6 themes/socialblue/assets/css/base.css
  7. 8.7 themes/socialblue/assets/css/base.css
  8. 8.8 themes/socialblue/assets/css/base.css
@font-face {
  font-family: 'montserrat';
  src: url("../font/montserrat/montserrat-light.eot") format('embedded-opentype'),
       url("../font/montserrat/montserrat-light.woff2") format('woff2'),
       url("../font/montserrat/montserrat-light.woff") format('woff'),
       url("../font/montserrat/montserrat-light.ttf") format('truetype'),
       url("../font/montserrat/montserrat-light.svg") format('svg');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'montserrat';
  src: url("../font/montserrat/montserrat-normal.eot") format('embedded-opentype'),
       url("../font/montserrat/montserrat-normal.woff2") format('woff2'),
       url("../font/montserrat/montserrat-normal.woff") format('woff'),
       url("../font/montserrat/montserrat-normal.ttf") format('truetype'),
       url("../font/montserrat/montserrat-normal.svg") format('svg');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'montserrat';
  src: url("../font/montserrat/montserrat-bold.eot") format('embedded-opentype'),
       url("../font/montserrat/montserrat-bold.woff2") format('woff2'),
       url("../font/montserrat/montserrat-bold.woff") format('woff'),
       url("../font/montserrat/montserrat-bold.ttf") format('truetype'),
       url("../font/montserrat/montserrat-bold.svg") format('svg');
  font-weight: 700;
  font-style: normal;
}

code,
kbd,
pre,
samp {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

code {
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 2px;
}

kbd {
  color: #fff;
  background-color: #333;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

pre {
  color: #333333;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 10px;
}

blockquote {
  border-left: 3px solid #29abe2;
}

strong {
  font-weight: 500;
}

.text-primary {
  color: #29abe2;
}

a.text-primary:hover,
a.text-primary:focus {
  color: #1a8dbe;
}

.text-success {
  color: #3c763d;
}

a.text-success:hover,
a.text-success:focus {
  color: #2b542c;
}

.text-info {
  color: #31708f;
}

a.text-info:hover,
a.text-info:focus {
  color: #245269;
}

.text-warning {
  color: #8a6d3b;
}

a.text-warning:hover,
a.text-warning:focus {
  color: #66512c;
}

.text-danger {
  color: #a94442;
}

a.text-danger:hover,
a.text-danger:focus {
  color: #843534;
}

.text-muted {
  color: #777;
}

a.text-muted:hover,
a.text-muted:focus {
  color: #5e5e5e;
}

.text-gray {
  color: #555555;
}

a.text-gray:hover,
a.text-gray:focus {
  color: #3c3c3c;
}

.text-gray-light {
  color: #777;
}

a.text-gray-light:hover,
a.text-gray-light:focus {
  color: #5e5e5e;
}

.text-gray-lighter {
  color: #adadad;
}

a.text-gray-lighter:hover,
a.text-gray-lighter:focus {
  color: #949494;
}

.text-gray-lightest {
  color: #e6e6e6;
}

a.text-gray-lightest:hover,
a.text-gray-lightest:focus {
  color: #cdcdcd;
}

.text-accent {
  color: #ffc142;
}

a.text-accent:hover,
a.text-accent:focus {
  color: #ffb00f;
}

.bg-primary {
  background-color: #29abe2;
}

.bg-secondary {
  background-color: #1f80aa;
}

.bg-accent {
  background-color: #ffc142;
}

.bg-success {
  background-color: #dff0d8;
}

.bg-warning {
  background-color: #fcf8e3;
}

.bg-danger {
  background-color: #f2dede;
}

.bg-info {
  background-color: #d9edf7;
}

.bg-gray-base {
  background-color: #000;
}

.bg-gray-darker {
  background-color: #222222;
}

.bg-gray-dark {
  background-color: #333333;
}

.bg-gray {
  background-color: #555555;
}

.bg-gray-light {
  background-color: #777;
}

.bg-gray-light-1 {
  background-color: #adadad;
}

.bg-gray-lighter {
  background-color: #e6e6e6;
}

.bg-gray-lighter-1 {
  background-color: #f7f7f7;
}

.bg-gray-lightest {
  background-color: #f3f3f3;
}

.bg-white {
  background-color: white;
}

.brand-primary {
  background-color: #29abe2;
  border-color: #29abe2;
  color: white;
}

a.brand-primary:hover,
a.brand-primary:focus {
  background-color: #1a8dbe;
  border-color: #1a8dbe;
  color: white;
}

.brand-secondary {
  background-color: #1f80aa;
  border-color: #1f80aa;
  color: white;
}

a.brand-secondary:hover,
a.brand-secondary:focus {
  background-color: #17607f;
  border-color: #17607f;
  color: white;
}

.brand-accent {
  background-color: #ffc142;
  border-color: #ffc142;
  color: #4d4d4d;
}

a.brand-accent:hover,
a.brand-accent:focus {
  background-color: #ffb00f;
  border-color: #ffb00f;
  color: #4d4d4d;
}

.brand-user {
  background-color: #222222;
  border-color: #222222;
  color: white;
}

a.brand-user:hover,
a.brand-user:focus {
  background-color: #090909;
  border-color: #090909;
  color: white;
}

.default-light {
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  color: #4d4d4d;
}

a.default-light:hover,
a.default-light:focus {
  background-color: #cdcdcd;
  border-color: #cdcdcd;
  color: #4d4d4d;
}

body {
  font-family: "montserrat", sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #4d4d4d;
  background-color: #f3f3f3;
}

.table-primary,
.table-primary > th,
.table-primary > td {
  background-color: #c3e7f7;
}

.table-hover .table-primary:hover {
  background-color: #addef4;
}

.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
  background-color: #addef4;
}

.table-secondary,
.table-secondary > th,
.table-secondary > td {
  background-color: #c0dbe7;
}

.table-hover .table-secondary:hover {
  background-color: #aed0e0;
}

.table-hover .table-secondary:hover > td,
.table-hover .table-secondary:hover > th {
  background-color: #aed0e0;
}

.table-accent,
.table-accent > th,
.table-accent > td {
  background-color: #ffeeca;
}

.table-hover .table-accent:hover {
  background-color: #ffe6b1;
}

.table-hover .table-accent:hover > td,
.table-hover .table-accent:hover > th {
  background-color: #ffe6b1;
}

.table-success,
.table-success > th,
.table-success > td {
  background-color: #d1ebd1;
}

.table-hover .table-success:hover {
  background-color: #bfe3bf;
}

.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
  background-color: #bfe3bf;
}

.table-info,
.table-info > th,
.table-info > td {
  background-color: #c6eaf8;
}

.table-hover .table-info:hover {
  background-color: #afe2f5;
}

.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
  background-color: #afe2f5;
}

.table-warning,
.table-warning > th,
.table-warning > td {
  background-color: #ffdeb8;
}

.table-hover .table-warning:hover {
  background-color: #ffd29f;
}

.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
  background-color: #ffd29f;
}

.table-danger,
.table-danger > th,
.table-danger > td {
  background-color: #f4cfce;
}

.table-hover .table-danger:hover {
  background-color: #efbbb9;
}

.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
  background-color: #efbbb9;
}

.table-light,
.table-light > th,
.table-light > td {
  background-color: #f8f8f8;
}

.table-hover .table-light:hover {
  background-color: #ebebeb;
}

.table-hover .table-light:hover > td,
.table-hover .table-light:hover > th {
  background-color: #ebebeb;
}

.table-dark,
.table-dark > th,
.table-dark > td {
  background-color: #c6c6c6;
}

.table-hover .table-dark:hover {
  background-color: #b9b9b9;
}

.table-hover .table-dark:hover > td,
.table-hover .table-dark:hover > th {
  background-color: #b9b9b9;
}

.table-active,
.table-active > th,
.table-active > td {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
  background-color: rgba(0, 0, 0, 0.075);
}

.table .table {
  background-color: #f3f3f3;
}

.table th a {
  color: #1d789e;
}

.table th.is-active > a {
  color: #29abe2;
}

.table .icon-tablesort {
  fill: #29abe2;
}

.img-avatar,
.avatar img,
.avatar-icon {
  border-radius: 50%;
}

File

themes/socialblue/assets/css/base.css
View source 
  1. @font-face {

  2.   font-family: 'montserrat';

  3.   src: url("../font/montserrat/montserrat-light.eot") format('embedded-opentype'),

  4.        url("../font/montserrat/montserrat-light.woff2") format('woff2'),

  5.        url("../font/montserrat/montserrat-light.woff") format('woff'),

  6.        url("../font/montserrat/montserrat-light.ttf") format('truetype'),

  7.        url("../font/montserrat/montserrat-light.svg") format('svg');

  8.   font-weight: 300;

  9.   font-style: normal;

  10. }

  11. 

  12. @font-face {

  13.   font-family: 'montserrat';

  14.   src: url("../font/montserrat/montserrat-normal.eot") format('embedded-opentype'),

  15.        url("../font/montserrat/montserrat-normal.woff2") format('woff2'),

  16.        url("../font/montserrat/montserrat-normal.woff") format('woff'),

  17.        url("../font/montserrat/montserrat-normal.ttf") format('truetype'),

  18.        url("../font/montserrat/montserrat-normal.svg") format('svg');

  19.   font-weight: 500;

  20.   font-style: normal;

  21. }

  22. 

  23. @font-face {

  24.   font-family: 'montserrat';

  25.   src: url("../font/montserrat/montserrat-bold.eot") format('embedded-opentype'),

  26.        url("../font/montserrat/montserrat-bold.woff2") format('woff2'),

  27.        url("../font/montserrat/montserrat-bold.woff") format('woff'),

  28.        url("../font/montserrat/montserrat-bold.ttf") format('truetype'),

  29.        url("../font/montserrat/montserrat-bold.svg") format('svg');

  30.   font-weight: 700;

  31.   font-style: normal;

  32. }

  33. 

  34. code,

  35. kbd,

  36. pre,

  37. samp {

  38.   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;

  39. }

  40. 

  41. code {

  42.   color: #c7254e;

  43.   background-color: #f9f2f4;

  44.   border-radius: 2px;

  45. }

  46. 

  47. kbd {

  48.   color: #fff;

  49.   background-color: #333;

  50.   border-radius: 3px;

  51.   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);

  52.           box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);

  53. }

  54. 

  55. pre {

  56.   color: #333333;

  57.   background-color: #f5f5f5;

  58.   border: 1px solid #ccc;

  59.   border-radius: 10px;

  60. }

  61. 

  62. blockquote {

  63.   border-left: 3px solid #29abe2;

  64. }

  65. 

  66. strong {

  67.   font-weight: 500;

  68. }

  69. 

  70. .text-primary {

  71.   color: #29abe2;

  72. }

  73. 

  74. a.text-primary:hover,

  75. a.text-primary:focus {

  76.   color: #1a8dbe;

  77. }

  78. 

  79. .text-success {

  80.   color: #3c763d;

  81. }

  82. 

  83. a.text-success:hover,

  84. a.text-success:focus {

  85.   color: #2b542c;

  86. }

  87. 

  88. .text-info {

  89.   color: #31708f;

  90. }

  91. 

  92. a.text-info:hover,

  93. a.text-info:focus {

  94.   color: #245269;

  95. }

  96. 

  97. .text-warning {

  98.   color: #8a6d3b;

  99. }

  100. 

  101. a.text-warning:hover,

  102. a.text-warning:focus {

  103.   color: #66512c;

  104. }

  105. 

  106. .text-danger {

  107.   color: #a94442;

  108. }

  109. 

  110. a.text-danger:hover,

  111. a.text-danger:focus {

  112.   color: #843534;

  113. }

  114. 

  115. .text-muted {

  116.   color: #777;

  117. }

  118. 

  119. a.text-muted:hover,

  120. a.text-muted:focus {

  121.   color: #5e5e5e;

  122. }

  123. 

  124. .text-gray {

  125.   color: #555555;

  126. }

  127. 

  128. a.text-gray:hover,

  129. a.text-gray:focus {

  130.   color: #3c3c3c;

  131. }

  132. 

  133. .text-gray-light {

  134.   color: #777;

  135. }

  136. 

  137. a.text-gray-light:hover,

  138. a.text-gray-light:focus {

  139.   color: #5e5e5e;

  140. }

  141. 

  142. .text-gray-lighter {

  143.   color: #adadad;

  144. }

  145. 

  146. a.text-gray-lighter:hover,

  147. a.text-gray-lighter:focus {

  148.   color: #949494;

  149. }

  150. 

  151. .text-gray-lightest {

  152.   color: #e6e6e6;

  153. }

  154. 

  155. a.text-gray-lightest:hover,

  156. a.text-gray-lightest:focus {

  157.   color: #cdcdcd;

  158. }

  159. 

  160. .text-accent {

  161.   color: #ffc142;

  162. }

  163. 

  164. a.text-accent:hover,

  165. a.text-accent:focus {

  166.   color: #ffb00f;

  167. }

  168. 

  169. .bg-primary {

  170.   background-color: #29abe2;

  171. }

  172. 

  173. .bg-secondary {

  174.   background-color: #1f80aa;

  175. }

  176. 

  177. .bg-accent {

  178.   background-color: #ffc142;

  179. }

  180. 

  181. .bg-success {

  182.   background-color: #dff0d8;

  183. }

  184. 

  185. .bg-warning {

  186.   background-color: #fcf8e3;

  187. }

  188. 

  189. .bg-danger {

  190.   background-color: #f2dede;

  191. }

  192. 

  193. .bg-info {

  194.   background-color: #d9edf7;

  195. }

  196. 

  197. .bg-gray-base {

  198.   background-color: #000;

  199. }

  200. 

  201. .bg-gray-darker {

  202.   background-color: #222222;

  203. }

  204. 

  205. .bg-gray-dark {

  206.   background-color: #333333;

  207. }

  208. 

  209. .bg-gray {

  210.   background-color: #555555;

  211. }

  212. 

  213. .bg-gray-light {

  214.   background-color: #777;

  215. }

  216. 

  217. .bg-gray-light-1 {

  218.   background-color: #adadad;

  219. }

  220. 

  221. .bg-gray-lighter {

  222.   background-color: #e6e6e6;

  223. }

  224. 

  225. .bg-gray-lighter-1 {

  226.   background-color: #f7f7f7;

  227. }

  228. 

  229. .bg-gray-lightest {

  230.   background-color: #f3f3f3;

  231. }

  232. 

  233. .bg-white {

  234.   background-color: white;

  235. }

  236. 

  237. .brand-primary {

  238.   background-color: #29abe2;

  239.   border-color: #29abe2;

  240.   color: white;

  241. }

  242. 

  243. a.brand-primary:hover,

  244. a.brand-primary:focus {

  245.   background-color: #1a8dbe;

  246.   border-color: #1a8dbe;

  247.   color: white;

  248. }

  249. 

  250. .brand-secondary {

  251.   background-color: #1f80aa;

  252.   border-color: #1f80aa;

  253.   color: white;

  254. }

  255. 

  256. a.brand-secondary:hover,

  257. a.brand-secondary:focus {

  258.   background-color: #17607f;

  259.   border-color: #17607f;

  260.   color: white;

  261. }

  262. 

  263. .brand-accent {

  264.   background-color: #ffc142;

  265.   border-color: #ffc142;

  266.   color: #4d4d4d;

  267. }

  268. 

  269. a.brand-accent:hover,

  270. a.brand-accent:focus {

  271.   background-color: #ffb00f;

  272.   border-color: #ffb00f;

  273.   color: #4d4d4d;

  274. }

  275. 

  276. .brand-user {

  277.   background-color: #222222;

  278.   border-color: #222222;

  279.   color: white;

  280. }

  281. 

  282. a.brand-user:hover,

  283. a.brand-user:focus {

  284.   background-color: #090909;

  285.   border-color: #090909;

  286.   color: white;

  287. }

  288. 

  289. .default-light {

  290.   background-color: #e6e6e6;

  291.   border-color: #e6e6e6;

  292.   color: #4d4d4d;

  293. }

  294. 

  295. a.default-light:hover,

  296. a.default-light:focus {

  297.   background-color: #cdcdcd;

  298.   border-color: #cdcdcd;

  299.   color: #4d4d4d;

  300. }

  301. 

  302. body {

  303.   font-family: "montserrat", sans-serif;

  304.   font-weight: 300;

  305.   -webkit-font-smoothing: antialiased;

  306.   -moz-osx-font-smoothing: grayscale;

  307.   color: #4d4d4d;

  308.   background-color: #f3f3f3;

  309. }

  310. 

  311. .table-primary,

  312. .table-primary > th,

  313. .table-primary > td {

  314.   background-color: #c3e7f7;

  315. }

  316. 

  317. .table-hover .table-primary:hover {

  318.   background-color: #addef4;

  319. }

  320. 

  321. .table-hover .table-primary:hover > td,

  322. .table-hover .table-primary:hover > th {

  323.   background-color: #addef4;

  324. }

  325. 

  326. .table-secondary,

  327. .table-secondary > th,

  328. .table-secondary > td {

  329.   background-color: #c0dbe7;

  330. }

  331. 

  332. .table-hover .table-secondary:hover {

  333.   background-color: #aed0e0;

  334. }

  335. 

  336. .table-hover .table-secondary:hover > td,

  337. .table-hover .table-secondary:hover > th {

  338.   background-color: #aed0e0;

  339. }

  340. 

  341. .table-accent,

  342. .table-accent > th,

  343. .table-accent > td {

  344.   background-color: #ffeeca;

  345. }

  346. 

  347. .table-hover .table-accent:hover {

  348.   background-color: #ffe6b1;

  349. }

  350. 

  351. .table-hover .table-accent:hover > td,

  352. .table-hover .table-accent:hover > th {

  353.   background-color: #ffe6b1;

  354. }

  355. 

  356. .table-success,

  357. .table-success > th,

  358. .table-success > td {

  359.   background-color: #d1ebd1;

  360. }

  361. 

  362. .table-hover .table-success:hover {

  363.   background-color: #bfe3bf;

  364. }

  365. 

  366. .table-hover .table-success:hover > td,

  367. .table-hover .table-success:hover > th {

  368.   background-color: #bfe3bf;

  369. }

  370. 

  371. .table-info,

  372. .table-info > th,

  373. .table-info > td {

  374.   background-color: #c6eaf8;

  375. }

  376. 

  377. .table-hover .table-info:hover {

  378.   background-color: #afe2f5;

  379. }

  380. 

  381. .table-hover .table-info:hover > td,

  382. .table-hover .table-info:hover > th {

  383.   background-color: #afe2f5;

  384. }

  385. 

  386. .table-warning,

  387. .table-warning > th,

  388. .table-warning > td {

  389.   background-color: #ffdeb8;

  390. }

  391. 

  392. .table-hover .table-warning:hover {

  393.   background-color: #ffd29f;

  394. }

  395. 

  396. .table-hover .table-warning:hover > td,

  397. .table-hover .table-warning:hover > th {

  398.   background-color: #ffd29f;

  399. }

  400. 

  401. .table-danger,

  402. .table-danger > th,

  403. .table-danger > td {

  404.   background-color: #f4cfce;

  405. }

  406. 

  407. .table-hover .table-danger:hover {

  408.   background-color: #efbbb9;

  409. }

  410. 

  411. .table-hover .table-danger:hover > td,

  412. .table-hover .table-danger:hover > th {

  413.   background-color: #efbbb9;

  414. }

  415. 

  416. .table-light,

  417. .table-light > th,

  418. .table-light > td {

  419.   background-color: #f8f8f8;

  420. }

  421. 

  422. .table-hover .table-light:hover {

  423.   background-color: #ebebeb;

  424. }

  425. 

  426. .table-hover .table-light:hover > td,

  427. .table-hover .table-light:hover > th {

  428.   background-color: #ebebeb;

  429. }

  430. 

  431. .table-dark,

  432. .table-dark > th,

  433. .table-dark > td {

  434.   background-color: #c6c6c6;

  435. }

  436. 

  437. .table-hover .table-dark:hover {

  438.   background-color: #b9b9b9;

  439. }

  440. 

  441. .table-hover .table-dark:hover > td,

  442. .table-hover .table-dark:hover > th {

  443.   background-color: #b9b9b9;

  444. }

  445. 

  446. .table-active,

  447. .table-active > th,

  448. .table-active > td {

  449.   background-color: rgba(0, 0, 0, 0.075);

  450. }

  451. 

  452. .table-hover .table-active:hover {

  453.   background-color: rgba(0, 0, 0, 0.075);

  454. }

  455. 

  456. .table-hover .table-active:hover > td,

  457. .table-hover .table-active:hover > th {

  458.   background-color: rgba(0, 0, 0, 0.075);

  459. }

  460. 

  461. .table .table {

  462.   background-color: #f3f3f3;

  463. }

  464. 

  465. .table th a {

  466.   color: #1d789e;

  467. }

  468. 

  469. .table th.is-active > a {

  470.   color: #29abe2;

  471. }

  472. 

  473. .table .icon-tablesort {

  474.   fill: #29abe2;

  475. }

  476. 

  477. .img-avatar,

  478. .avatar img,

  479. .avatar-icon {

  480.   border-radius: 50%;

  481. }