API tools faq
paste
Advertisement
watsoons

CSS Step by step

watsoons
Apr 21st, 2023
33
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 60.81 KB | None | 0 0
raw download clone embed print report
  1. #users_here {
  2. color: var(--red);
  3. padding: 4px;
  4. }
  5. .fond-user_here {
  6. background-color: var(--white);
  7. border-radius: 5px;
  8. }
  9.  
  10. .i_icon_quote {
  11. font-size: 14px; }
  12. .sautervers {
  13. background-color: var(--white);
  14. border-radius: 5px;
  15. padding-left: 2px;
  16. padding-right: 2px;
  17. }
  18.  
  19. i {
  20. color: var(--green);
  21. }
  22.  
  23. /* STRUCTURE DU FORUM */
  24.  
  25. /*** ROOT
  26. *** Tutoriel : geniuspandalab.tumblr.com/post/634694343906689024/cssroot ***/
  27.  
  28. /* VARIABLE DU MODE DE BASE (ici clair) */
  29. :root {
  30. --header: url('https://i.ibb.co/hfcNdHv/step.gif');
  31.  
  32. --red: #893c3e;
  33. --green: #42524a;
  34. --darkwhite: #f5f3f3;
  35. --degreen: linear-gradient(to right,#42524a,#799989);
  36. --degred: linear-gradient(to right,#893c3e,#ba4a4d);
  37.  
  38. --neutral: #fafbfc;
  39. --neutralDark: #bdbdad;
  40. --neutralDarker: #dce3f4;
  41.  
  42. --contrast: #171938;
  43. --contrastLight: #232657;
  44. --contrastLighter: #c3c8f3;
  45. --white: #ffffff;
  46.  
  47. --accentClr: #42524a;
  48. --accentClrDark: #33433b;
  49.  
  50. --textColor: #751c1d;
  51. --textColorAccent: #751c1d;
  52.  
  53. --border: 1px solid #E5E5E5;
  54.  
  55. --shadowBox: 0 0 20px #23265730;
  56.  
  57. --little-size: 12px;
  58. --normal-size: 14px;
  59. --medium-size: 16px;
  60. --large-size: 18px;
  61. --title-size: 22px;
  62.  
  63. --font: 'PT Serif';
  64.  
  65. }
  66.  
  67.  
  68. /* S'applique à TOUS les éléments du forum*/
  69. * {
  70. box-sizing: border-box; /*évite que les éléments soient agrandis par le padding*/
  71. /* SCROLLBAR CUSTOM POUR MOZILLA */
  72. scrollbar-color: var(--contrastLight);
  73. scrollbar-width: thin;
  74. }
  75.  
  76. /*** ------------------------------- ***/
  77. /*** TOUTES LES PAGES --------------- ***/
  78.  
  79. /* FOND DU FORUM ---*/
  80. body {
  81. background-image: url("https://i.ibb.co/9w8VSw5/fond2.png"); /* The image used */
  82. background-color: #bdbdaf; /* Used if the image is unavailable */
  83. background-position: center; /* Center the image */
  84. background-repeat: repeat; /* Do not repeat the image */
  85. background-size: cover;
  86. font-family: var(--font);
  87. font-size: var(--normal-size);
  88. color: var(--textColor);
  89. margin: 0 !important;
  90. }
  91.  
  92.  
  93. /* SCROLLBAR --- */
  94. /* Scrollbar entière */
  95. ::-webkit-scrollbar {}
  96.  
  97. /* Rail */
  98. ::-webkit-scrollbar-track {}
  99.  
  100. /* Poignée */
  101. ::-webkit-scrollbar-thumb {}
  102.  
  103.  
  104. /* STRUCTURE PRINCIPALE ---*/
  105. .main_forum {
  106. width: 900px;
  107. /*largeur forum*/
  108. margin: 20px auto;
  109. padding: 20px;
  110. background: transparent;
  111. border-radius: 5px;
  112. }
  113.  
  114. /* BANNIERE ---*/
  115. /* Mettre la bannière en fond permet de la changer selon le thème clair ou sombre */
  116. #header {
  117. background-image: var(--header);
  118. background-position: center;
  119. background-repeat: no-repeat;
  120. background-size: 860px;
  121. border: solid 10px var(--white);
  122. border-radius: 5px 5px 0px 0px;
  123. width: 860px;
  124. height: 450px;
  125. display: block;
  126. }
  127.  
  128. /* Conteneur de toutes les sous-sections
  129. * comme les encadrés d'options, de rappel, etc... */
  130. .panel {
  131. background: var(--neutral);
  132. border: var(--border);
  133. border-radius: 5px;
  134. padding: 10px;
  135. margin: 25px 0;
  136. }
  137.  
  138. .sidebar {
  139. position: fixed;
  140. background-color: transparent;
  141. inset: 0;
  142. width: max-content;
  143. display: flex;
  144. flex-direction: column;
  145. justify-content: space-between;
  146. padding: 15px 10px;
  147. z-index: 999;
  148. }
  149.  
  150. /* Conteneur de l'ascenseur
  151. * Sert essentiellement à définir où le placer dans la page */
  152. .sidebar_bottom {
  153. width: 45px;
  154. z-index: 999;
  155. display: flex;
  156. flex-direction: column;
  157. gap: 10px;
  158. }
  159.  
  160. /* Lien de renvoi haut/bas */
  161. .sidebar_bottom > a {
  162. padding: 5px 8px;
  163. background: var(--neutralDark);
  164. border-radius: 5px;
  165. text-align: center;
  166. }
  167.  
  168. /* GÉNÉRALITÉS */
  169.  
  170. /*** LIENS ET TEXTE */
  171.  
  172. /* LIENS DU FORUM --- */
  173. a {
  174. font-weight: 600;
  175. text-decoration: none;
  176. color: var(--red);
  177. }
  178.  
  179. /*liens au survol*/
  180. a:hover {
  181. color: var(--accentClr);
  182. }
  183.  
  184. /* Emoji mis par défaut de FA
  185. * Les réduire les rend moins horribles à voir */
  186. .emojione {
  187. width: 19px !important
  188. }
  189.  
  190.  
  191. /* TITRES DES PAGES --- ***/
  192.  
  193. /* Utilisé pour des titres de pages */
  194. .page-title-box {
  195. background-color: var(--red);
  196. height: 60px;
  197. border-radius: 5px;
  198. margin-bottom: 30px;
  199. }
  200.  
  201. .page-title-box2 {
  202. background-color: var(--green);
  203. height: 60px;
  204. border-radius: 5px 5px 0 0;
  205.  
  206. }
  207.  
  208. h1,
  209. h1.page-title {
  210. color: var(--white);
  211. background-color: var(--red);
  212. font-size: var(--title-size);
  213. font-weight: 700;
  214. text-transform: uppercase;
  215. text-align: center;
  216. padding: 10px;
  217. border-radius: 5px;
  218. }
  219.  
  220. /* Utilisé pour des titres de sujets, blogs... */
  221. h2,
  222. .h2 {
  223. margin: 0;
  224. font-size: var(--large-size);
  225. font-weight: 700;
  226. }
  227.  
  228. /* Utilisé pour des titres de sous-sections, petit encadré, ...*/
  229. h3,
  230. .h3 {
  231. color: var(--green);
  232. padding-bottom: 10px;
  233. margin: 0;
  234. font-size: var(--medium-size);
  235. font-weight: bold;
  236. }
  237.  
  238. .surveillebox {
  239. background-color: var(--darkwhite); }
  240.  
  241.  
  242. /*** --------------------------------------- ***/
  243. /*** BOUTONS D'INTERACTION ET BARRE DE TEXTE ***/
  244.  
  245. /* BARRE DE TEXTE ---*/
  246. input[type="text"],
  247. input[type="password"],
  248. input.inputbox {
  249. border: 1px solid #e0dede;
  250. border-radius: 5px;
  251. background: var(--darkwhite);
  252. font-size: var(--normal-size);
  253. color: var(--green);
  254. padding: 2px 6px;
  255. }
  256.  
  257.  
  258. /* BOUTONS D'INTERACTION --- *
  259. * Envoyer, prévisualiser, sauvegarder, aller,... */
  260. input[type="submit"],
  261. input[type="button"],
  262. input[type="hidden"],
  263. input[type="reset"] {
  264. font-size: var(--normal-size);
  265. padding: 2px 8px !important;
  266. border-radius: 5px;
  267. background: var(--white);
  268. color: var(--red);
  269. font-weight: 600;
  270. border: none;
  271. }
  272.  
  273. input[type="submit"]:hover,
  274. input[type="button"]:hover,
  275. input[type="hidden"]:hover,
  276. input[type="reset"]:hover {
  277. color: var(--accentClr)
  278. }
  279.  
  280. .submit-buttons {text-align: center;}
  281.  
  282. .quickmod {margin-bottom: 20px;}
  283.  
  284. /* MENUS DEROULANTS --- */
  285. select {
  286. background: var(--white);
  287. border: var(--border);
  288. border-radius: 5px;
  289. font-size: var(--normal-size);
  290. padding: 1px 4px;
  291. color: var(--red);
  292. font-weight: 200;
  293. }
  294.  
  295. option {
  296. background: var(--white);
  297. border: var(--border);
  298. }
  299.  
  300.  
  301. /* Editeur de texte */
  302. .sceditor-container {
  303. border: var(--border)!important
  304. }
  305.  
  306. /* Barre d'outils de l'éditeur de texte*/
  307. div.sceditor-toolbar {
  308. background: var(--white)!important;
  309. border-bottom: var(--border)!important;
  310. }
  311.  
  312. /* Conteneur des groupes d'outils */
  313. div.sceditor-group {
  314. background: var(--neutralDark)!important;
  315. border-bottom: var(--border)!important;
  316. }
  317.  
  318. /* Bouton d'un outil */
  319. a.sceditor-button {
  320. height: 26px !important;
  321. /*ne pas retirer*/
  322. width: 26px !important;
  323. /*ne pas retirer*/
  324. }
  325.  
  326. /* Conteneur de la zone de texte */
  327. .sceditor-container iframe,
  328. .sceditor-container textarea {
  329. background-color: var(--neutral)!important;
  330. /*ne pas supprimer*/
  331. width: 100% !important;
  332. margin: 0 !important;
  333. padding: 5px !important;
  334. /*ne pas supprimer*/
  335. min-height: 250px !important;
  336. }
  337.  
  338. /*Boîte Smiley*/
  339. body#sce_smilies_body {
  340. background: transparent!important;
  341. }
  342.  
  343.  
  344. /* Autre champs de texte */
  345. textarea {
  346. background: var(--neutralDark);
  347. border: var(--border);
  348. color: var(--textColor)!important;
  349. }
  350.  
  351.  
  352.  
  353. /* PAGINATIONS*/
  354.  
  355. .pagination {}
  356.  
  357. /*lien unique vers les pages numérotées*/
  358. .pagination span a {
  359. font-size: var(--little-size);
  360. }
  361.  
  362. /*survol des liens uniques des pages*/
  363. .pagination span a:hover {font-weight: 600}
  364.  
  365. /*lien actif : page sur laquelle vous vous trouvez */
  366. .pagination span strong {
  367. background-color: var(--neutralDark);
  368. border-radius: 3px;
  369. padding: 1px 4px;
  370. }
  371.  
  372. /*suppression de l'image-lien "aller à la page suivante" */
  373. .page-topic span a:last-child,
  374. .pag-img {
  375. display: none;
  376. }
  377.  
  378. /*** ELEMENTS ESTHETIQUES ---------- ***/
  379.  
  380. /* Contenur général qui sert généralement de fond et/ou de contour*/
  381. .container {
  382. background: var(--white);
  383. padding: 10px;
  384. border-radius: 5px;
  385. }
  386.  
  387. /* Barre de séparation */
  388. .separator {
  389. padding-bottom: 5px;
  390. margin-bottom: 5px;
  391. border-bottom: 1px solid var(--neutralDark);
  392. clear: both;
  393. height: 1px;
  394. width: 100%;
  395. }
  396.  
  397. /* Conteneur moins large (les historiques des messages essentiellement) */
  398. .wrapped {
  399. width: 80%;
  400. margin: 10px auto;
  401. clear: both;
  402. }
  403.  
  404. /* Image/avatar réduit */
  405. .mini_img img {
  406. width: 40px;
  407. height: 40px;
  408. object-fit: cover;
  409. object-position: center;
  410. border-radius: 5px;
  411. margin-right: 10px;
  412. background: var(--neutralDark);
  413. }
  414.  
  415.  
  416. /* Permet d'aligner un élément à droite ou à gauche */
  417. .right {
  418. float: right
  419. }
  420.  
  421. .left {
  422. float: left
  423. }
  424.  
  425. .clear {
  426. clear: both
  427. }
  428.  
  429. /* Barre de gestion
  430. * Contient des boutons ou des liens spéciaux */
  431. .links_bar {
  432. padding: 10px;
  433. background-color: var(--white);
  434. border-radius: 5px;
  435. margin: 25px 0;
  436. clear: both;
  437. color: var(--red);
  438. }
  439.  
  440. .liens-surv {
  441. color: var(--white) !important;
  442. }
  443.  
  444. /* supprime si vide */
  445. .links_bar:empty {
  446. display: none
  447. }
  448.  
  449. /* Lien spécial mis en avant */
  450. .specials_links a,
  451. a.specials_links {
  452. background: var(--green);
  453. padding: 2px 6px;
  454. border-radius: 5px;
  455. color: var(--white) !important;
  456. }
  457.  
  458. /* Suppression des liens vides */
  459. .specials_links a:empty,
  460. a.specials_links:empty {
  461. display: none
  462. }
  463.  
  464. /*ENTETE DU FORUM */
  465.  
  466. /*** TOOLBAR */
  467.  
  468. /* Toute la toolbar */
  469. #fa_toolbar {
  470. font-size: var(--little-size);
  471. font-family: var(--font);
  472. color: var(--white);
  473.  
  474. }
  475.  
  476. /* Supression de la barre de recherche, des boutons sociaux et des flèches */
  477. #fa_search,
  478. #fa_share,
  479. #fa_hide {
  480. display: none
  481. }
  482.  
  483. /* Logo Forumactif :
  484. * ATTENTION, il est techniquement interdit de supprimer de logo de FA.
  485. * Techniquement. Faites-en donc ce que vous voulez. */
  486. #fa_left {
  487. display: none
  488. }
  489.  
  490. /* Conteneur du lien de bienvenue et notification */
  491. #fa_right {
  492. position: relative;
  493.  
  494. margin-right: 5px;
  495. border-radius: 5px;
  496. height: 40px;
  497. display: flex;
  498. align-items: center;
  499. padding: 5px;
  500. }
  501.  
  502. /* LIENS DE LA TOOLBAR ---*/
  503.  
  504. /* Tous les liens : connexion, s'enregistrer, bienvenue (pseudo), notification*/
  505. #fa_welcome,
  506. #fa_notifications,
  507. #fa_right a.rightHeaderLink[href*="/login"],
  508. #fa_right a.rightHeaderLink[href*="/register"] {
  509. cursor: pointer;
  510. padding: 4px 6px;
  511. }
  512.  
  513. /* Lien "Connexion" */
  514. #fa_right a.rightHeaderLink[href*="/login"] {font-size: 0px;}
  515. #fa_right a.rightHeaderLink[href*="/login"]:before {
  516. content:'\ec19';
  517. font-family:'cappuccicons';
  518. font-weight: 400;
  519. font-size: 20px;
  520. color: var(--textColorAccent);
  521. }
  522.  
  523. /* Lien "S'enregistrer" */
  524. #fa_right a.rightHeaderLink[href*="/register"] {font-size: 0px;}
  525. #fa_right a.rightHeaderLink[href*="/register"]:before {
  526. content:'\ebaf';
  527. font-family:'cappuccicons';
  528. font-weight: 400;
  529. font-size: 20px;
  530. color: var(--textColorAccent);
  531. }
  532.  
  533.  
  534. /* Lien "Bienvenue (pseudo)" */
  535. #fa_welcome {color: var(--textColorAccent);}
  536.  
  537. /* Lien "notification"*/
  538. #fa_notifications {font-size: 0px;}
  539. a#fa_notifications { font-size: 1px; }
  540. a#fa_notifications:before {
  541. content:'\e95a';
  542. font-family:'cappuccicons';
  543. font-weight: 400;
  544. font-size: 20px;
  545. color: var(--textColorAccent);
  546. }
  547.  
  548.  
  549. /* liens "bienvenue" et "notification" [AU CLIC] */
  550. #fa_right.welcome #fa_menu #fa_welcome,
  551. #fa_toolbar > #fa_right.notification > #fa_notifications {
  552. background: var(--textColorAccent);
  553. border-radius: 5px;
  554. }
  555.  
  556.  
  557. /* MENU bienvenue [ET] liste des notifications */
  558. ul#fa_menulist,
  559. ul#notif_list {
  560. border: var(--border);
  561. background: var(--neutral);
  562. border-radius: 5px;
  563. right: 0;
  564. left: initial !important;
  565. top: 45px;
  566. z-index: 999;
  567. position: absolute;
  568. display: none;
  569. }
  570.  
  571.  
  572. /* MENU BIENVENUE ---*/
  573. /* conteneur */
  574. #fa_menulist {
  575. width: 350px;
  576. }
  577.  
  578. /* Colonne gauche du menu de bienvenue avec avatar */
  579. #fa_usermenu {
  580. float: left;
  581. padding: 15px;
  582. text-align: center;
  583. min-height: 250px
  584. }
  585.  
  586. /* Image de l'avatar dans le menu de bienvenue */
  587. #fa_usermenu img {
  588. object-fit: cover;
  589. object-position: center;
  590. width: 120px;
  591. height: 120px;
  592. display: block;
  593. margin-bottom: 10px;
  594. }
  595.  
  596. /* Liens du menu de bienvenue */
  597. #fa_menulist li {
  598. margin: 10px 0;
  599. }
  600.  
  601. /* Séparateur du menu de bienvenue */
  602. #fa_toolbar #fa_right .fa_separator {
  603. margin: 5px 0 5px 150px;
  604. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  605. }
  606.  
  607.  
  608. /* LISTE DES NOTIFICATIONS ---*/
  609. /* conteneur*/
  610. #notif_list {
  611. width: 380px;
  612. padding: 5px;
  613. flex-direction: column-reverse;
  614. }
  615.  
  616. /* Ligne d'une notification */
  617. #notif_list li {
  618. position: relative;
  619. padding: 5px;
  620. padding-right: 20px;
  621. border-top: 1px solid var(--neutralDark);
  622. }
  623.  
  624. #notif_list li:nth-last-child(2) {
  625. border-top: none
  626. }
  627.  
  628.  
  629. /* Notifications non lues */
  630. #notif_list .unread {
  631. background: var(--neutralDark);
  632. font-weight: bold;
  633. }
  634.  
  635. /* Bouton suppresion d'une notification */
  636. #fa_toolbar #fa_right #notif_list li a.delete {
  637. position: absolute;
  638. top: 8px;
  639. right: 5px;
  640. }
  641.  
  642. /* Croix du bouton suppression */
  643. #fa_toolbar #fa_right #notif_list li a.delete:before {
  644. content: "\f12a";
  645. display: inline-block;
  646. font-family: "Ionicons";
  647. font-style: normal;
  648. font-weight: normal;
  649. color: #FF4F42;
  650. }
  651.  
  652. /* Lien "voir toutes les notifications" */
  653. #notif_list .see_all {
  654. background: var(--neutralDark);
  655. border-radius: 5px;
  656. margin-top: 5px;
  657. text-align: center;
  658. order: -1;
  659. }
  660.  
  661. /* POPUP NOTIFICATION ---*/
  662.  
  663. /* Placement du pop-up de nouvelle notification */
  664. #fa_toolbar #live_notif {
  665. position: absolute;
  666. top: 45px;
  667. right: 0px !important;
  668. }
  669.  
  670. /* Stylisation du pop-up */
  671. #fa_toolbar #live_notif .fa_notification {
  672. border-radius: 5px;
  673. background: rgba(0, 0, 0, 0.2);
  674. padding: 5px;
  675. }
  676.  
  677.  
  678. /* AVATAR TOOLBAR ---*/
  679. /* Conteneur de l'avatar toolbar */
  680. .fa_avatar {
  681. position: absolute;
  682. top: -1px;
  683. left: -45px;
  684. width: 40px;
  685. height: 40px;
  686. display: grid;
  687. place-items: center;
  688. }
  689.  
  690. /* Image de l'avatar */
  691. .fa_avatar img {
  692. object-fit: cover;
  693. object-position: center;
  694. width: 40px;
  695. height: 40px;
  696. border-radius: 5px;
  697. }
  698.  
  699.  
  700. /*** SWITCHEROO - Par Monomer ------ ***/
  701. /*** Gestionnaire de multicompte --- ***/
  702.  
  703. :root {
  704. --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  705. --ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56);
  706. }
  707.  
  708. /* BARRE SWITCHEROO --- */
  709. /* BARRE --- */
  710. .switcheroo {
  711. color: var(--white);
  712.  
  713. margin-top: 0px;
  714. }
  715.  
  716. /* Positionnement des ronds */
  717. .switcheroo__squircles {
  718. display: flex;
  719. flex-direction: column;
  720. align-items: center;
  721. position: static;
  722. margin: 0;
  723. padding: 0;
  724. list-style: none;
  725. gap: 35px;
  726. margin-bottom: 20px;
  727. }
  728.  
  729. /* AFFICHAGE DES COMPTES ---*/
  730.  
  731. /* Rond */
  732. .switcheroo__squircle {
  733. position: relative;
  734. display: grid;
  735. place-items: center;
  736. background-color: var(--red);
  737. width: 30px;
  738. height: 30px;
  739. border-radius: 50%;
  740. cursor: pointer;
  741. outline: 5px solid transparent;
  742. transition: border-radius 128ms var(--ease);
  743. margin-top: 30px;
  744. }
  745.  
  746. /* Rond au survol */
  747. .switcheroo__squircle:hover {
  748. outline-color: var(--neutralDarker);
  749. border-radius: 8px;
  750. }
  751.  
  752. .switcheroo__squircle:hover img {
  753. border-radius: 8px;
  754. }
  755.  
  756. /* Conteneur de l'avatar */
  757. .switcheroo__avatar {
  758. width: 100%;
  759. aspect-ratio: 1/1;
  760.  
  761. }
  762.  
  763. /* Image de l'avatar */
  764. .switcheroo__avatar img {
  765. width: 100%;
  766. height: 100%;
  767. object-fit: cover;
  768. object-position: center;
  769. border-radius: 50%;
  770. transition: border-radius 128ms var(--ease);
  771. position: relative;
  772. }
  773.  
  774. /* Avatar du compte connecté */
  775. .switcheroo__squircle.active,
  776. .switcheroo__squircle.active img {
  777. cursor: default;
  778. }
  779.  
  780. /* AJOUTER UN COMPTE ---*/
  781. /* button : ajouter un compte */
  782. .switcheroo__squircle--button {
  783. transition: border-radius 128ms var(--ease);
  784. color: var(--white);
  785. margin-top: -10px;
  786. position: fixed;
  787. }
  788.  
  789. /* icon plus */
  790. .switcheroo__squircle--button i {font-size: 19px; color: var(--white);}
  791.  
  792. .switcheroo__squircle--button:hover {color: var(--white);}
  793.  
  794. /* Bouton de suppression */
  795. .switcheroo__delete {
  796. display: grid;
  797. place-items: center;
  798. position: absolute;
  799. width: 16px;
  800. height: 16px;
  801. top: -7px;
  802. right: -7px;
  803. border-radius: 50%;
  804. background-color: var(--accentClr);
  805. transform: scale(0);
  806. opacity: 1;
  807. transition: transform 128ms var(--ease), opacity 64ms var(--ease);
  808. cursor: pointer;
  809. color: var(--white);
  810. line-height: 0;
  811. }
  812.  
  813. .switcheroo__squircle:hover .switcheroo__delete {
  814. opacity: 1;
  815. transform: scale(1);
  816. }
  817.  
  818. /* TOOLTIP - INFOBULLE DU PSEUDO ---*/
  819.  
  820. /* Conteneur du pseudo */
  821. .switcheroo__popper {
  822. background-color: var(--neutralDarker);
  823. padding: 0.30rem 1rem;
  824. position: absolute;
  825. width: -webkit-max-content;
  826. width: max-content;
  827. border-radius: 5px;
  828. z-index: 0;
  829. opacity: 0;
  830. transition: opacity 64ms var(--ease), transform 128ms var(--ease-bounce);
  831. pointer-events: none;
  832. color: var(--textColor);
  833. left: 155%;
  834. top: 50%;
  835. transform-origin: left;
  836. transform: translateY(-50%) scale(0.98);
  837. }
  838.  
  839. /* Flèche tooltip */
  840. .switcheroo__popper:before {
  841. content: "";
  842. position: absolute;
  843. width: 20px;
  844. height: 20px;
  845. background-color: var(--neutralDarker);
  846. z-index: -1;
  847. left: -3px;
  848. top: 50%;
  849. transform: translateY(-50%) rotate(-45deg);
  850. border-radius: 2px;
  851. }
  852.  
  853. .switcheroo__squircle:hover .switcheroo__popper {
  854. opacity: 1;
  855. transform: translateY(-50%) scale(1);
  856. }
  857.  
  858.  
  859. /* LOGO --- retirez display:none pour retrouver le logo */
  860. .switcheroo__logo,
  861. .switcheroo__divider {display: none}
  862.  
  863.  
  864. /* MODAL : FENETRE DE CONNEXION --- */
  865.  
  866. /* Fond de l'affichage de connexion */
  867. .monomer-overlay {
  868. position: fixed;
  869. z-index: 999;
  870. top: 0;
  871. left: 0;
  872. opacity: 0;
  873. width: 100%;
  874. height: 100%;
  875. transition: 0.2s opacity ease;
  876. background: rgba(0, 0, 0, 0.2);
  877. }
  878.  
  879. /* Boîte de connexion */
  880. .monomer-modal {
  881. position: fixed;
  882. z-index: 999;
  883. top: 50%;
  884. left: 50%;
  885. opacity: 0;
  886. width: 94%;
  887. padding: 30px;
  888. transition: 0.2s opacity ease;
  889. transform: translate(-50%, -50%);
  890. border-radius: 10px;
  891. background: var(--neutral);
  892. padding: 50px;
  893. box-shadow: var(--shadowBox);
  894. }
  895.  
  896.  
  897. /* Champs à remplir */
  898. .switcheroo__form-row {
  899. display: flex;
  900. flex-flow: column;
  901. align-items: flex-start;
  902. margin-bottom: 20px;
  903. }
  904.  
  905. /* Nom du champ */
  906. .switcheroo__form-label {
  907. margin-bottom: 8px;
  908. font-size: 14px;
  909. text-transform: uppercase;
  910. font-weight: 600;
  911. }
  912.  
  913. /* Zone de texte */
  914. .switcheroo__form-input {
  915. padding: 6px!important;
  916. border-radius: 4px;
  917. width: 100%;
  918. background-color: var(--neutral);
  919. color: var(--red);
  920. cursor: text;
  921. }
  922.  
  923. /* Bouton de connexion */
  924. .switcheroo__form-button {
  925. border-radius: 8px;
  926. padding: 4px 10px 5px;
  927. border: none;
  928. outline: none;
  929. box-shadow: none;
  930. text-transform: uppercase;
  931. font-size: 14px;
  932. align-self: center;
  933. background-color: var(--accentClr);
  934. cursor: pointer;
  935. color: var(--neutral);
  936. font-weight: 600;
  937. margin-top: 10px;
  938. }
  939.  
  940. .switcheroo__form-button:hover {
  941. background: var(--contrastLight);
  942. }
  943.  
  944. .monomer-modal.monomer-open,
  945. .monomer-overlay.monomer-open {
  946. opacity: 1;
  947. }
  948.  
  949. /* Fermer la boîte de connexion */
  950. .monomer-close {
  951. font-size: 16px;
  952. line-height: 12px;
  953. width: 18px;
  954. height: 18px;
  955. position: absolute;
  956. top: 5px;
  957. right: 5px;
  958. cursor: pointer;
  959. color: var(--textColor);
  960. border: 0;
  961. outline: none;
  962. background: var(--contrastLighter);
  963. border-radius: 4px;
  964. padding: 0;
  965. padding-left: 1px;
  966. }
  967.  
  968. .monomer-close:hover {
  969. background: var(--contrastLight);
  970. }
  971.  
  972. /*** BARRE DE NAVIGATION */
  973.  
  974. /* Conteneur de la barre de nav */
  975. .navbar {
  976. background: var(--white);
  977.  
  978. padding: 10px;
  979. display: flex;
  980. /* permet de mettre les liens sur une ligne */
  981. align-items: center;
  982. /*centre verticalement*/
  983. justify-content: left;
  984. /*centre horizontalement*/
  985. }
  986.  
  987. /* Suppression des liens peu utilisés*/
  988. .navbar a[href^="/faq"],
  989. /*faq*/
  990. .navbar a[href^="/calendar"],
  991. /*calendrier*/
  992. .navbar a[href^="/groups"],
  993. /*groupes*/
  994. .navbar a[href^="/images"]
  995. { display: none}
  996.  
  997. .i_icon_profile {width: 0px; height: 0px;}
  998. .i_icon_profile:before {
  999. content:'\eb0d';
  1000. font-family:'cappuccicons';
  1001. font-weight: 400;
  1002. font-size: 20px;
  1003. color: var(--textColorAccent); }
  1004.  
  1005. .navbar a[href^="/"] {font-size: 0px; padding-left: 60px;}
  1006. .navbar a[href^="/"]:before {
  1007. content:'\eb0d';
  1008. font-family:'cappuccicons';
  1009. font-weight: 400;
  1010. font-size: 20px;
  1011. color: var(--textColorAccent);
  1012. border: solid 2px var(--textColorAccent);
  1013. border-radius: 5px;
  1014. padding: 4px;
  1015.  
  1016. }
  1017.  
  1018. .navbar a[href^="/privmsg"] {font-size: 0px; padding: 5px !important;}
  1019. .navbar a[href^="/privmsg"]:before {
  1020. content:'\ea88';
  1021. font-family:'cappuccicons';
  1022. font-weight: 400;
  1023. font-size: 20px;
  1024. color: var(--textColorAccent);
  1025. border: solid 2px var(--textColorAccent);
  1026. padding: 4px;
  1027. border-radius: 5px;
  1028. }
  1029.  
  1030. .navbar a[href^="/profile"] {font-size: 0px; padding: 5px !important;}
  1031. .navbar a[href^="/profile"]:before {
  1032. content:'\ecf0';
  1033. font-family:'cappuccicons';
  1034. font-weight: 400;
  1035. font-size: 20px;
  1036. color: var(--textColorAccent);
  1037. border: solid 2px var(--textColorAccent);
  1038. padding: 4px;
  1039. }
  1040.  
  1041. .navbar a[href^="/search"] {font-size: 0px; padding: 5px !important;}
  1042. .navbar a[href^="/search"]:before {
  1043. content:'\ec5f';
  1044. font-family:'cappuccicons';
  1045. font-weight: 400;
  1046. font-size: 20px;
  1047. color: var(--textColorAccent);
  1048. border: solid 2px var(--textColorAccent);
  1049. padding: 4px;
  1050. }
  1051.  
  1052. .navbar a[href^="/memberlist"] {font-size: 0px; padding: 5px !important;}
  1053. .navbar a[href^="/memberlist"]:before {
  1054. content:'\eb81';
  1055. font-family:'cappuccicons';
  1056. font-weight: 400;
  1057. font-size: 20px;
  1058. color: var(--textColorAccent);
  1059. border: solid 2px var(--textColorAccent);
  1060. padding: 4px;
  1061.  
  1062. }
  1063.  
  1064. .navbar a[href^="/login"] {font-size: 0px; padding: 5px !important;}
  1065. .navbar a[href^="/login"]:before {
  1066. content:'\ec19';
  1067. font-family:'cappuccicons';
  1068. font-weight: 400;
  1069. font-size: 20px;
  1070. color: var(--textColorAccent);
  1071. border: solid 2px var(--textColorAccent);
  1072. padding: 4px;
  1073.  
  1074. }
  1075.  
  1076. .navbar a[href^="/login?logout"] {font-size: 0px; padding: 5px !important;}
  1077. .navbar a[href^="/login?logout"]:before {
  1078. content:'\ec19';
  1079. font-family:'cappuccicons';
  1080. font-weight: 400;
  1081. font-size: 20px;
  1082. color: var(--textColorAccent);
  1083. border: solid 2px var(--textColorAccent);
  1084. padding: 4px;
  1085.  
  1086. }
  1087.  
  1088. .navbar a[href^="/register"] {font-size: 0px; padding: 5px !important;}
  1089. .navbar a[href^="/register"]:before {
  1090. content:'\ebaf';
  1091. font-family:'cappuccicons';
  1092. font-weight: 400;
  1093. font-size: 20px;
  1094. color: var(--textColorAccent);
  1095. border: solid 2px var(--textColorAccent);
  1096. padding: 4px;
  1097.  
  1098. }
  1099.  
  1100. /* liens de navigation */
  1101. a.mainmenu {padding: 5px; color:var(--white);}
  1102.  
  1103. /* Lien navigation au survol*/
  1104. a.mainmenu:hover {
  1105. background: var(--neutral);
  1106. border-radius: 5px;
  1107. }
  1108.  
  1109. /* Image des liens */
  1110. a.mainmenu img {display: none}
  1111.  
  1112. /*** ANNONCES DEFILANTES */
  1113.  
  1114. /* Barre défilante */
  1115. .module {
  1116. border-radius: 5px;
  1117. border: var(--border);
  1118. margin: 10px 0;
  1119. padding: 4px 8px;
  1120. }
  1121.  
  1122.  
  1123. /*INDEX */
  1124.  
  1125. /* PAGE D'ACCUEIL ---*/
  1126. .introduction {}
  1127.  
  1128. /*** CATEGORIES */
  1129.  
  1130. .category {
  1131. background: transparent;
  1132. border-radius: 10px;
  1133. padding: 10px;
  1134. margin-bottom: 25px;
  1135. }
  1136.  
  1137. /* Titre d'une catégorie */
  1138. .fond_cat_title {
  1139. background-color: var(--white);
  1140. height: 70px;
  1141. border-radius: 5px;
  1142. margin-bottom: 20px;}
  1143.  
  1144. .cate_title h2 {
  1145. display: block;
  1146. text-align: center;
  1147. text-transform: uppercase;
  1148. item-align: center;
  1149. font-size: 22px;
  1150. font-weight: 700;
  1151. color: var(--textColorAccent);
  1152. vertical-align: center;
  1153. padding-top: 20px;
  1154. }
  1155.  
  1156. .forum_row {
  1157. display: flex;
  1158. flex-wrap: wrap;
  1159. margin-bottom: 10px;
  1160. background: var(--neutral);
  1161. padding: 10px;
  1162. border-radius: 5px;
  1163. }
  1164.  
  1165. .forum_row:last-child {
  1166. margin-bottom: 0;
  1167. }
  1168.  
  1169.  
  1170. /* titre d'un forum */
  1171. a.forumtitle {
  1172. width: 100%;
  1173. margin-left: 80px;
  1174. margin-bottom: -45px;
  1175. font-size: var(--large-size);
  1176. text-transform: uppercase;
  1177.  
  1178. }
  1179. #borderbottom {
  1180. border-bottom: 2px solid var(--textColorAccent);
  1181. position: relative;
  1182. width: 480px;}
  1183.  
  1184. .forum-img {
  1185. width: 70px;
  1186. height: 115px;
  1187. background-color: var(--neutralDark);
  1188. border-radius: 5px;
  1189. }
  1190.  
  1191. .forum_desc {
  1192. max-height: 55px;
  1193. overflow: auto;
  1194. width: 55%;
  1195. margin: 0 30px 0 15px;
  1196. align-self: center;
  1197. color: var(--green);
  1198. }
  1199.  
  1200. .description-left {
  1201. background-color: #f5f3f3;
  1202. border-radius: 5px;
  1203. width: 250px;
  1204. height: 120px;
  1205. float: right;
  1206. padding: 20px;
  1207. }
  1208. .lastmsg {
  1209. color: #42524a;
  1210. border-bottom: 2px solid #42524a;
  1211. margin-top: -14px;}
  1212.  
  1213. .forum_lastpost-avatar {
  1214. width: 66px;
  1215. height: 105px;
  1216. border-radius: 5px;
  1217. margin-top: -10px;
  1218. margin-right: -2px;
  1219. float: right;
  1220. }
  1221.  
  1222. .forum_lastpost-avatar img {
  1223. background: var(--neutralDark);
  1224. width: 66px;
  1225. height: 105px;
  1226. object-fit: cover;
  1227. object-position: right;
  1228. border-radius: 5px;
  1229. margin-right: -2px;
  1230. margin-top: -10px;
  1231. }
  1232.  
  1233. .forum_lastpost {
  1234. display: flex;
  1235. align-items: center;
  1236. text-align: left;
  1237. width: 200;
  1238. height: 60px;
  1239. margin-left: 10px;
  1240. font-size: 13px;
  1241. margin-top: 10px;
  1242. color: #42524a;
  1243. }
  1244.  
  1245. .forum_details {
  1246.  
  1247. width: 80%;
  1248. display: flex;
  1249. float: center;
  1250. text-align: center;
  1251. margin-left: 100px;
  1252. margin-top: -30px;
  1253. align-items: center;
  1254. text-transform: uppercase;
  1255. justify-content: space-between;
  1256. }
  1257.  
  1258.  
  1259. #subforum {
  1260. font-size: 0
  1261. }
  1262.  
  1263. #subforum a {
  1264. font-size: var(--little-size);
  1265. color: var(--red);
  1266. margin-right: 10px;
  1267. }
  1268.  
  1269. .forum_stats {
  1270. font-weight: 600;
  1271. float: right;
  1272. margin-right: 300px;
  1273. font-size: var(--little-size);
  1274. }
  1275.  
  1276. /*ne pas supprimer*/
  1277. #online_users br {
  1278. display: none
  1279. }
  1280.  
  1281.  
  1282.  
  1283. /*LISTE DES SUJETS */
  1284.  
  1285. /*** ENTETE ET FOOTER DE LA LISTE DES SUJETS ***/
  1286.  
  1287. /* Chaîne de navigation et pagination
  1288. * (réutilisé dans l'affichage d'un sujet (viewtopic_body)) */
  1289. .navigation_links {
  1290. display: flex;
  1291. justify-content: space-between;
  1292. margin: 10px 0;
  1293. background-color: var(--white);
  1294. padding: 3px;
  1295. border-radius: 5px;
  1296. }
  1297.  
  1298. /* chaîne de lien de navigation : catégorie > forum > sous-fo */
  1299. .navigation_chain {
  1300. font-size: 0;
  1301. /*retire les :: de séparation */
  1302. }
  1303.  
  1304. .navigation_chain a {
  1305. font-size: initial;
  1306. /*rétablit la taille des liens*/
  1307. margin-right: 8px;
  1308.  
  1309. }
  1310.  
  1311. .navigation_chain a:before {
  1312. content: '›';
  1313. /*symbole ou texte modifiable*/
  1314. font-size: var(--nomal-size);
  1315. margin-right: 3px;
  1316. }
  1317.  
  1318.  
  1319. /* BOUTONS DE MESSAGE : Répondre, Nouveau,... ---*
  1320. * (réutilisé dans l'affichage d'un sujet (viewtopic_body) et les MP (privmsgs_body) */
  1321. .buttons {
  1322. background: var(--red);
  1323. font-size: 14px;
  1324. color: var(--white);
  1325. padding: 1px 8px;
  1326. margin-right: 5px;
  1327. border-radius: 5px;
  1328. opacity: 1;
  1329. }
  1330.  
  1331. .buttons:hover {
  1332. background: var(--green);
  1333. color: var(--white);
  1334. opacity: .7;
  1335. }
  1336.  
  1337. /* BOUTONS : modérer les sujets de ce forum */
  1338. #moderation_forum_tools,
  1339. #moderation_forum_tools strong {
  1340. font-size: 0px;
  1341. color: var(--white);
  1342. }
  1343.  
  1344. #moderation_forum_tools a {
  1345. background: var(--white);
  1346. border-radius: 5px;
  1347. padding: 2px 8px;
  1348. font-size: var(--normal-size);
  1349. color: var(--red);
  1350. }
  1351.  
  1352.  
  1353. /*** LISTE DES SUJETS ***/
  1354.  
  1355. .topicslist_row {
  1356. background: #fafbfc;
  1357. border-radius: 5px;
  1358. padding: 10px;
  1359. margin-bottom: 10px;
  1360. display: flex;
  1361. flex-wrap: wrap;
  1362. gap: 10px;
  1363. align-items: center;
  1364. }
  1365.  
  1366. .topicslist_row:last-child {
  1367. margin-bottom: 0
  1368. }
  1369.  
  1370. /* Image du sujet */
  1371. .topicslist-img {
  1372. width: 10px;
  1373. position: relative;
  1374.  
  1375. }
  1376. .listimg1 {
  1377. width: 40px;
  1378. position: relative;
  1379. border-radius: 5px;
  1380.  
  1381. }
  1382.  
  1383. .topicslist_infos {
  1384. flex-grow: 100;
  1385. }
  1386.  
  1387.  
  1388. /*titre du sujet*/
  1389. .topictitlefond {
  1390. background-color: var(--green);
  1391. height: 25px;
  1392. border-radius: 5px;
  1393. margin-top: 1px;
  1394. margin-left: 30px;
  1395. }
  1396.  
  1397. .topictitle {
  1398. font-size: var(--medium-size);
  1399. /* permet de raccourir les titres trop long ainsi : "Titre du suj..." */
  1400. overflow: hidden;
  1401. text-overflow: ellipsis;
  1402. display: inline-block;
  1403. max-width: 400px;
  1404. white-space: nowrap;
  1405. vertical-align: bottom;
  1406. color: var(--white) !important;
  1407. padding: 3px;
  1408.  
  1409. }
  1410.  
  1411. .cp cp-paper-plane-o{
  1412. color: #ffffff !important;
  1413. /* whichever other stylings you want */
  1414. }
  1415. .iconplane {
  1416. color: #ffffff;
  1417. font-size: 14px;
  1418. }
  1419.  
  1420. .topic-author {
  1421. color: var(--red);
  1422. font-size: 14px;
  1423. text-align: left;
  1424. float: right;
  1425. background-color: var(--darkwhite);
  1426. margin-top: -10px;
  1427. border-radius: 5px;
  1428. padding: 3px;
  1429.  
  1430. }
  1431.  
  1432. /* icône de type de message ( exemple : -18 ans, sujet résolu, ... ) */
  1433. .topic_msgicon {
  1434. margin-right: 5px
  1435. }
  1436.  
  1437. .topic_msgicon:empty {
  1438. display: none;
  1439. }
  1440.  
  1441. .topiclist-infos img {
  1442. margin-right: 3px
  1443. }
  1444.  
  1445.  
  1446. .topicslist-stats {
  1447. text-align: center;
  1448. vertical-align: center;
  1449. font-size: 14px;
  1450. color: var(--white);
  1451. background-color: var(--white);
  1452. height: 60px;
  1453. width: 60px;
  1454. border-radius: 5px;
  1455.  
  1456. }
  1457.  
  1458. .topiclist-rep {
  1459. background-color: var(--red);
  1460. border-radius: 5px;
  1461. width: 55px;
  1462. height: 20px;
  1463. margin-left: 3px;
  1464. margin-top: 5px;
  1465. position: relative;
  1466. }
  1467.  
  1468. .topiclist-view {
  1469. background-color: var(--red);
  1470. border-radius: 5px;
  1471. width: 55px;
  1472. height: 20px;
  1473. margin-left: 3px;
  1474. margin-top: -10px;
  1475. position: relative;
  1476. }
  1477.  
  1478. .background-avatar {
  1479. width: 60px;
  1480. height: 60px;
  1481. background-color: var(--darkwhite);
  1482. border-radius: 5px;
  1483.  
  1484. }
  1485.  
  1486. .topicslist-avatar-lastpost img {
  1487. object-fit: cover;
  1488. object-position: center;
  1489. float: center;
  1490. position: relative;
  1491. width: 50px;
  1492. height: 50px;
  1493. border-radius: 5px !important;
  1494. margin-left: 5px;
  1495. margin-top: 5px;
  1496.  
  1497. }
  1498.  
  1499. .topicslist-lastpost {
  1500. width: 130px;
  1501. height: 60px;
  1502. background-color: var(--darkwhite);
  1503. vertical-align: center;
  1504. position: relative;
  1505. border-radius: 5px;
  1506. text-align: center;
  1507. color: var(--red);
  1508. font-size: 13px;
  1509. }
  1510.  
  1511. .topicslist-description {
  1512. width: 90%;
  1513. margin-left: 30px;
  1514. margin-top: -20px;
  1515. }
  1516.  
  1517. /*AFFICHAGE D'UN SUJET*/
  1518.  
  1519. /* PARTICIPANTS DU SUJET ---*/
  1520.  
  1521. /* Conteneur de la liste des participants au sujet */
  1522. .poster-list {
  1523. display: flex;
  1524. align-items: center;
  1525. justify-content: center;
  1526. margin-top: -10px;
  1527. margin-bottom: 20px;
  1528. background-color: var(--green);
  1529. border-radius: 5px;
  1530. width: max-content;
  1531. color: var(--white);
  1532. }
  1533.  
  1534. /* Avatar du participant*/
  1535. .poster {
  1536. background: var(--poster-avatar);
  1537. height: 30px;
  1538. width: 30px;
  1539. border-radius: 100%;
  1540. margin-left: -8px;
  1541. border: 2px solid #79827c;
  1542. background-size: cover;
  1543. background-position: center;
  1544. }
  1545.  
  1546. /* Lien de renvoi vers son profil */
  1547. .poster a {
  1548. display: block;
  1549. height: 100%;
  1550. }
  1551.  
  1552. /* Nombre de participants */
  1553. .poster-count {
  1554. margin-left: 8px;
  1555. }
  1556.  
  1557. .poster-more-list {
  1558. display: none;
  1559. }
  1560.  
  1561. .poster-more {
  1562. display: grid;
  1563. place-items: center;
  1564. position: relative;
  1565. }
  1566.  
  1567. .poster-more:hover .poster-more-list {
  1568. display: block;
  1569. position: absolute;
  1570. top: 29px;
  1571. width: 150px;
  1572. background: var(--neutralDarker);
  1573. padding: 10px;
  1574. border-radius: 5px;
  1575. }
  1576.  
  1577.  
  1578. /*SUJET*/
  1579.  
  1580.  
  1581. .post_row {
  1582. background: var(--neutral);
  1583. display: grid;
  1584. grid-template-rows: max-content auto;
  1585. grid-template-columns: min-content 1fr;
  1586. border-bottom: 1px solid #f6f6f6;
  1587. }
  1588.  
  1589. div.post_row:nth-of-type(2) {
  1590. border-radius: 5px 5px 0 0;
  1591. }
  1592.  
  1593. div.post_row:last-of-type {
  1594. border-radius: 0 0 5px 5px;
  1595. border-bottom: none
  1596. }
  1597.  
  1598. .post_details {
  1599. grid-column: 1 / span 2;
  1600. padding: 10px;
  1601. display: flex;
  1602. align-items: center;
  1603. background-color: var(--green);
  1604. border-bottom: 1px solid #f6f6f6;
  1605. border-radius: 5px;
  1606. width: 100%;
  1607. color: var(--white);
  1608. }
  1609.  
  1610.  
  1611. .post_date {
  1612. flex-grow: 100;
  1613. padding: 2px;
  1614. }
  1615.  
  1616. .post_details a {
  1617. color: var(--white);
  1618. padding: 2px;
  1619.  
  1620. }
  1621.  
  1622. .post_date1 {
  1623. background-color: var(--white);
  1624. padding: 2px;
  1625. border-radius: 5px;
  1626. color: var(--green);
  1627. }
  1628.  
  1629.  
  1630. /* BOUTONS D'EDITION DU MESSAGE --- */
  1631. /* Conteneur boutons d'édition */
  1632. ul.profile-icons {
  1633. flex-grow: 1;
  1634. display: flex;
  1635. color: var(--white);
  1636. }
  1637.  
  1638. /*UN SEUL bouton d'édition */
  1639. ul.profile-icons li {
  1640. padding: 2px 4px;
  1641. border-radius: 5px;
  1642. color: var(--white);
  1643. }
  1644.  
  1645. /*hover d'un bouton d'édition*/
  1646. ul.profile-icons li:hover {
  1647. background: var(--neutralDark);
  1648. }
  1649.  
  1650.  
  1651.  
  1652. /* BOUTON LIKE --- */
  1653. /* Conteneur du bouton like */
  1654. .like_button {
  1655. float: right;
  1656. margin-left: 10px;
  1657. flex-grow: 1;
  1658. cursor: pointer;
  1659. }
  1660.  
  1661. /* Bouton like */
  1662. .rep-button,
  1663. .rep-button:active,
  1664. .rep-button:focus {
  1665. background: var(--neutralDark);
  1666. color: var(--textColor);
  1667. border: none;
  1668. padding: 3px 5px;
  1669. border-radius: 5px;
  1670. font-weight: 600;
  1671. }
  1672.  
  1673. /*Bouton au survol*/
  1674. .rep-button:hover {
  1675. background: var(--var(--contrastLighter))
  1676. }
  1677.  
  1678. /* Texte "j'aime" */
  1679. button.rep-button .like_text {}
  1680.  
  1681. /*compteur de like*/
  1682. button.rep-button .rep-nb {
  1683. margin-left: 5px;
  1684. padding: 0 3px;
  1685. background: var(--neutral);
  1686. border-radius: 3px;
  1687. }
  1688.  
  1689.  
  1690. .post_profile {
  1691. max-width: 224px;
  1692. padding: 10px;
  1693. border: 2px solid #f6f6f6;
  1694. background-color: f1f0f0;
  1695. border-radius: 5px;
  1696. text-align: justify;
  1697. }
  1698.  
  1699.  
  1700. .post_pseudo {
  1701. font-weight: bold;
  1702. color: var(--white) !important;
  1703. margin-bottom: -15px;
  1704. }
  1705.  
  1706. .post_pseudo a, .post_pseudo span {
  1707. font-weight: bold;
  1708. color: var(--white) !important;
  1709. margin-bottom: -15px;
  1710. }
  1711. .post_rank {
  1712. text-transform: uppercase;
  1713. border-top: 1px solid var(--white);
  1714. color: var(--white);
  1715. margin-top: -20px;
  1716. }
  1717.  
  1718. .fond_pseudo {
  1719. background-color: var(--red);
  1720. border: 2px solid #791d1d;
  1721. border-radius: 5px;
  1722. align-items: space-between;
  1723. justify-content: center;
  1724. padding: 5px;
  1725. margin-bottom: 10px;
  1726.  
  1727. }
  1728.  
  1729. .post_avatar img {
  1730. -webkit-border-radius: 5px;
  1731. -moz-border-radius: 5px;
  1732. border-radius: 5px;
  1733. }
  1734.  
  1735. .post_userinfo {
  1736. background-color: var(--white);
  1737. border: 2px solid #e0dede;
  1738. max-height: 200px;
  1739. border-radius: 5px;
  1740. padding: 5px;
  1741. margin-top: 10px;
  1742. overflow-x: auto;
  1743.  
  1744. }
  1745. .field_label {
  1746. font-weight: bold;
  1747. text-transform: uppercase;
  1748. }
  1749.  
  1750. .field_content img {
  1751. max-width: 186px;
  1752. height: auto;
  1753. }
  1754.  
  1755. .profil_contact {
  1756. background-color: var(--white);
  1757. border: 2px solid #e0dede;
  1758. border-radius: 5px;
  1759. gap: 10px;
  1760. display: flex;
  1761. font-size: 15px;
  1762. justify-content: center;
  1763. align-content: center;
  1764. align-items: center;
  1765. color: var(--white);
  1766. padding-top: 5px;
  1767. padding-bottom: 5px;
  1768. }
  1769.  
  1770. .profil_contact1 {
  1771. background-color: #e0dede;
  1772. border-radius: 5px;
  1773. padding: 3px;
  1774. color: var(--white) !important;
  1775. }
  1776. /* Lien "@" de mention */
  1777. a.fa-mention {
  1778. color: var(--white);
  1779. }
  1780.  
  1781.  
  1782. /* Mention "en ligne" */
  1783. .online {
  1784. display: inline-block;
  1785. position: relative;
  1786. background-color: var(--red);
  1787. color: var(--white);
  1788. border-radius: 5px;
  1789. padding: 0 5px;
  1790. margin-top: 10px;
  1791. margin-bottom: 10px;
  1792. width: 200px;
  1793. }
  1794.  
  1795. .online:empty {display: none}
  1796.  
  1797. .post_message {
  1798. display: flex;
  1799. justify-content: center;
  1800. padding: 25px;}
  1801.  
  1802.  
  1803. /* REPONSE RAPIDE --- */
  1804. /*supression de la mention "réponse rapide" */
  1805. .quickreply div.h3 {display: none}
  1806.  
  1807. /*centrer la réponse rapide*/
  1808. .quickreply {
  1809. display: flex;
  1810. justify-content: center;
  1811. }
  1812.  
  1813.  
  1814. /* Retire le cadre de la réponse rapide pour les invités */
  1815. #quickreply_content:empty {display: none}
  1816.  
  1817.  
  1818. /*** SONDAGE ----------------------- ***/
  1819.  
  1820. .poll {
  1821. background: var(--neutral);
  1822. border-radius: 5px;
  1823. margin-bottom: 10px;
  1824. }
  1825.  
  1826. .head_poll {
  1827. padding: 10px;
  1828. border-bottom: 1px solid var(--neutralDark);
  1829. display: flex;
  1830. justify-content: space-between;
  1831. align-items: center;
  1832. }
  1833.  
  1834. .poll_list {
  1835. display: grid;
  1836. grid-template-columns: 220px auto;
  1837. }
  1838.  
  1839. .poll_option {
  1840. padding: 10px 20px 0 10px;
  1841. border-right: 1px solid var(--neutralDark);
  1842. text-align: right;
  1843. }
  1844.  
  1845. .poll_vote {
  1846. padding: 10px 10px 0 20px;
  1847. display: flex;
  1848. align-items: center;
  1849. }
  1850.  
  1851. .poll_send {
  1852. margin-left: 220px;
  1853. padding: 20px 10px 20px 20px;
  1854. border-left: 1px solid var(--neutralDark);
  1855. }
  1856.  
  1857. .poll_vote:nth-child(2),
  1858. .poll_option:first-child {
  1859. padding-top: 20px;
  1860. }
  1861.  
  1862. /*** TEXTES, BALISES, ETC ---------- ***/
  1863.  
  1864. /* Lien-tag des utilisateurs */
  1865. .mentiontag {}
  1866.  
  1867.  
  1868. /* BALISES DE MESSAGE : spoiler, code, quote... */
  1869.  
  1870. /* Balise code, spoiler et hide*/
  1871. .codebox {
  1872. display: block;
  1873. width: 90%;
  1874. margin: 0 auto;
  1875. border-radius: 5px;
  1876. }
  1877.  
  1878. /* Contenu code, spoiler et hide*/
  1879. .codebox dd {
  1880. background-color: #f1f0f0;
  1881. border: 2px solid #e0dede;
  1882. border-radius: 5px;
  1883. padding: 5px
  1884. }
  1885.  
  1886. /* Nom de balise "code, spoiler" */
  1887. .codebox dt {
  1888. font-weight: 700;
  1889. font-size: var(--little-size);
  1890. }
  1891.  
  1892. /* Bouton "sélectionner le" code */
  1893. .selectCode {
  1894. float: right;
  1895. cursor: pointer;
  1896. }
  1897.  
  1898. .selectCode:hover {
  1899. color: var(--red);
  1900. }
  1901.  
  1902. div.cont_code {
  1903. clear: right;
  1904. }
  1905.  
  1906. /* Spoiler */
  1907. .hidebox.spoiler {}
  1908.  
  1909. /* spoiler fermé */
  1910. .spoiler_content {
  1911. display: none;
  1912. }
  1913.  
  1914. /* spoiler ouvert */
  1915. .spoiler_content.hidden {
  1916. display: block;
  1917. }
  1918.  
  1919.  
  1920. /* Citation contenu */
  1921. blockquote div {
  1922. padding-left: 20px;
  1923. background-color: #f1f0f0;
  1924. border: 2px solid #e0dede;
  1925. border-radius: 5px;
  1926. }
  1927.  
  1928.  
  1929. /* Citation mention "... a écrit" */
  1930. blockquote cite {
  1931. display: block;
  1932. margin-left: -20px;
  1933. font-style: normal;
  1934. }
  1935.  
  1936. /* Citation pseudo */
  1937. blockquote cite a {
  1938. text-decoration: none !important;
  1939. font-weight: 700;
  1940. }
  1941.  
  1942. /* Hide */
  1943. .codebox.hidecode dd {
  1944. background: transparent;
  1945. opacity: 0.8;
  1946. }
  1947.  
  1948.  
  1949.  
  1950. /*MEMBRES*/
  1951.  
  1952. /*** PAGE DE PROFIL ---------------- ***/
  1953.  
  1954. .user_profile {
  1955. background-color: var(--darkwhite);
  1956. border-radius: 5px;
  1957. display: grid;
  1958. grid-template-columns: max-content auto;
  1959. padding: 10px;
  1960. grid-gap: 20px;
  1961. }
  1962.  
  1963. .profile_avatar {
  1964. width: 200px;
  1965. }
  1966.  
  1967. .profile_infos {}
  1968.  
  1969. .profile_contact form {
  1970.  
  1971. display: flex;
  1972. }
  1973.  
  1974. .profile_contact form > div {
  1975. margin-left: 5px;
  1976. }
  1977.  
  1978. /* Suppression des cases vides de contact qui affichent " - "
  1979. * nth-child(n+4) supprime toutes les cases après la quatrième */
  1980. .profile_contact form div:nth-child(n+4) {
  1981. display: none
  1982. }
  1983.  
  1984. .profile_content {
  1985. height: 265px;
  1986. overflow: auto;
  1987. }
  1988.  
  1989. .profile_field {
  1990. margin: 10px 0;
  1991. display: grid;
  1992. grid-template-columns: 135px auto;
  1993. grid-gap: 10px;
  1994. }
  1995.  
  1996. .profile_field label,
  1997. .profile_field label > span {
  1998. font-weight: 600;
  1999. color: var(--red);
  2000. }
  2001.  
  2002. .profile_field field {
  2003. position: relative;
  2004. }
  2005.  
  2006. .profile_admin {
  2007. text-align: center;
  2008. margin: 10px 0 0;
  2009. }
  2010.  
  2011.  
  2012. /* Bouton édition d'un champ de profil */
  2013. .ajax-profil_edit {
  2014. cursor: pointer;
  2015. position: absolute;
  2016. top: 0;
  2017. left: 0px;
  2018. background-color: var(--darkwhite);
  2019.  
  2020. }
  2021.  
  2022. /* Bouton édition d'un champ de profil */
  2023. .ajax-profil_edit {
  2024. cursor: pointer;
  2025. position: absolute;
  2026. top: 0;
  2027. left: -15px;
  2028. background-color: var(--darkwhite);
  2029. }
  2030.  
  2031. /* Bouton validation des modifications */
  2032. .ajax-profil_valid {
  2033. cursor: pointer;
  2034. margin-left: 4px;
  2035. vertical-align: middle;
  2036. }
  2037.  
  2038.  
  2039. /*** WOMBAT PROFILS EN POP UP ---- ***/
  2040.  
  2041. /* Fond atténué */
  2042. .wombat-overlay {
  2043. position: fixed;
  2044. z-index: 990;
  2045. inset: 0;
  2046. opacity: 0;
  2047. visibility: hidden;
  2048. width: 100%;
  2049. height: 100%;
  2050. transition: 0.2s opacity ease;
  2051. background: var(--neutral);
  2052. }
  2053.  
  2054. /* effet de transition du fond atténué */
  2055. .wombat-overlay.open {
  2056. opacity: .5;
  2057. visibility: visible;
  2058. }
  2059.  
  2060. /* Fenêtre du popup */
  2061. .wombat-aside {
  2062. position: fixed;
  2063. inset: 0;
  2064. margin: auto;
  2065. z-index: 999;
  2066. transition: 0.2s all ease;
  2067. visibility: hidden;
  2068. opacity: 0;
  2069. width: 90%;
  2070. max-width: 800px;
  2071. box-shadow: var(--shadowBox);
  2072. border-radius: 10px;
  2073. height: max-content;
  2074. transform: translateX(-20%);
  2075. }
  2076.  
  2077. /* effet de transition pour la fenêtre */
  2078. .wombat-aside.open {
  2079. opacity: 1;
  2080. transform: translateX(0);
  2081. visibility: visible;
  2082. }
  2083.  
  2084.  
  2085. /*** PROFILS SIMPLIFIÉS DES TAGS ---- ***/
  2086.  
  2087. /* Supression de la flèche peu esthétique*/
  2088. .tooltipster-arrow {}
  2089.  
  2090. .tooltipster-default {}
  2091.  
  2092. .preview_content {
  2093. display: flex;
  2094. }
  2095.  
  2096. .preview_avatar img {
  2097. object-fit: cover;
  2098. object-position: center;
  2099. width: 70px;
  2100. height: 70px;
  2101. border-radius: 5px;
  2102. margin-right: 10px;
  2103. }
  2104.  
  2105. .preview_infos {
  2106. width: 100%;
  2107. padding-top: 3px
  2108. }
  2109.  
  2110. .preview_pseudo,
  2111. .preview_pseudo strong {
  2112. font-size: var(--medium-size);
  2113. }
  2114.  
  2115. .preview_contacts {
  2116. position: absolute;
  2117. bottom: 8px;
  2118. right: 10px;
  2119. }
  2120.  
  2121. .preview_contacts a {
  2122. margin-left: 5px
  2123. }
  2124.  
  2125. .tooltipster-arrow {
  2126. display: none
  2127. }
  2128.  
  2129.  
  2130. /*** LISTE DES MEMBRES ------------- ***/
  2131.  
  2132. .userlist {
  2133. display: grid;
  2134. grid-template-columns: auto auto;
  2135. grid-gap: 10px;
  2136. }
  2137.  
  2138. .userlist_profil {
  2139. display: grid;
  2140. grid-template-columns: 95px auto;
  2141. grid-gap: 10px;
  2142. padding: 10px;
  2143. background: #f1f0f0;
  2144. border: 2px solid #e0dede;
  2145. border-radius: 5px;
  2146. }
  2147.  
  2148. .userlist_avatar {}
  2149.  
  2150. .userlist_avatar img {
  2151. width: 75px;
  2152. height: 120px;
  2153. object-fit: cover;
  2154. object-position: center;
  2155. border-radius: 5px;
  2156. }
  2157.  
  2158. .userlist_details {}
  2159.  
  2160. .userlist_pseudo {
  2161. font-size: var(--medium-size);
  2162. background-color: var(--white);
  2163. border-radius: 5px;
  2164. padding: 3px;
  2165. border: 1px solid var(--red);
  2166. margin-bottom: 5px;
  2167. }
  2168.  
  2169. .userlist_infos {
  2170. margin-top: 10px;
  2171. }
  2172.  
  2173. .userlist_contact {
  2174. color: var(--green) !important;}
  2175.  
  2176.  
  2177.  
  2178.  
  2179. /*MESSAGES PRIVES*/
  2180.  
  2181. /*LISTE DES MPs*/
  2182.  
  2183. /* Menu des MPS */
  2184. #privmsgs-menu {
  2185. display: flex;
  2186. justify-content: center;
  2187. gap: 20px;
  2188. margin: 20px auto;
  2189. }
  2190.  
  2191. #privmsgs-menu li {
  2192. display: flex;
  2193. align-items: center;
  2194. gap: 5px;
  2195. }
  2196.  
  2197. /* Affichage d'un MP dans la liste */
  2198. .mp_row {
  2199. background: var(--neutral);
  2200. border-radius: 5px;
  2201. display: grid;
  2202. grid-template-columns: 55px auto;
  2203. grid-gap: 10px;
  2204. align-items: center;
  2205. margin-bottom: 10px;
  2206. padding: 10px;
  2207. }
  2208.  
  2209. /*** AFFICHAGE D'UN MESSAGE PRIVÉ -- ***/
  2210.  
  2211. .message {
  2212. background: var(--neutral);
  2213. border-radius: 5px;
  2214. display: grid;
  2215. grid-template-rows: max-content auto;
  2216. grid-template-columns: 220px auto;
  2217. }
  2218.  
  2219. .message_infos {
  2220. grid-column: 1 / span 2;
  2221. border-bottom: 1px solid var(--neutralDark);
  2222. padding: 10px;
  2223. display: flex;
  2224. justify-content: space-between;
  2225. }
  2226.  
  2227. .mp-icons {
  2228. display: flex;
  2229. float: right;
  2230. }
  2231.  
  2232. .message_profil {
  2233. padding: 10px;
  2234. border-right: 1px solid var(--neutralDark);
  2235. text-align: center;
  2236. }
  2237.  
  2238. .message_content {
  2239. padding: 25px;
  2240. }
  2241.  
  2242.  
  2243.  
  2244. /*PAGES ANNEXES*/
  2245.  
  2246.  
  2247. /* PAGE D'ENVOI D'UN MESSAGE */
  2248.  
  2249. .message-edition {
  2250. display: flex;
  2251. flex-direction: row;
  2252. /* flex-direction: row-reverse; -- pour smileys à droite */
  2253. gap: 15px;
  2254. /*espace entre la zone de texte et la boîte à smileys*/
  2255. }
  2256.  
  2257. /* Prévisualisation d'un message */
  2258. #preview {
  2259. background: var(--neutral);
  2260. padding: 10px;
  2261. border: var(--border);
  2262. border-radius: 5px;
  2263. }
  2264.  
  2265.  
  2266.  
  2267. /*** ------------------------------- ***/
  2268. /*** EDITION DE PROFIL ------------- ***/
  2269.  
  2270. /* Onglets dans la modification de profil */
  2271. #tabs ul {
  2272. display: flex;
  2273. justify-content: space-between;
  2274. margin: 20px 0 10px;
  2275. color: var(--white) !important;
  2276. }
  2277.  
  2278. /*onglet*/
  2279. #tabs li {
  2280. padding: 5px 10px;
  2281. border: 1px solid transparent;
  2282. background-color: #fafbfc;
  2283. border-radius: 5px;
  2284.  
  2285. }
  2286.  
  2287. /* Onglet selectionné */
  2288. #tabs li.activetab {
  2289. background: #f1ecec;
  2290. border: var(--border);
  2291. border-radius: 5px;
  2292. color: var(--white) !important;
  2293. }
  2294.  
  2295. /* onglet au survol */
  2296. #tabs li:hover {
  2297. background: #e9e9dd;
  2298. border-radius: 5px;
  2299. border: var(--border);
  2300. color: var(--white) !important;
  2301. }
  2302.  
  2303. /* Suppression de l'onglet "amis et ignorés" */
  2304. div#tabs li:nth-child(5) {
  2305. display: none;
  2306. }
  2307.  
  2308.  
  2309. .profil_preferences dl,
  2310. .profil_editavatar dl {
  2311. grid-template-columns: 40% auto;
  2312. }
  2313.  
  2314. .profil_preferences .italic {
  2315. font-size: var(--little-size);
  2316. }
  2317.  
  2318. /* EDITER SIGNATURE ---*/
  2319. #parent_editor_simple > #smiley-box {
  2320. float: left;
  2321. /* float: right; -- pour smileys à droite */
  2322. }
  2323.  
  2324. #parent_editor_simple #message-box {
  2325. margin-left: 240px;
  2326.  
  2327. /* margin-right: XXXpx -- pour smileys à droite */
  2328. }
  2329.  
  2330. #parent_editor_simple #message-box > br {
  2331. display: none
  2332. }
  2333.  
  2334. #parent_editor_simple #message-box > #textarea_content {
  2335. width: 100% !important;
  2336. color: var(--red);
  2337. }
  2338.  
  2339. .panel.row2.sig {
  2340. text-align: center;
  2341. margin-top: 10px;
  2342. color: var(--red);
  2343. }
  2344.  
  2345.  
  2346. /*** ------------------------------- ***/
  2347. /*** PAGES DE RECHERCHES ----------- ***/
  2348.  
  2349. /* RECHERCHE DE MESSAGE -----*/
  2350.  
  2351. /* Conteneur d'un message*/
  2352. .post_search {
  2353. display: grid;
  2354. grid-template-columns: 200px auto;
  2355. border-radius: 5px;
  2356. margin: 10px 0;
  2357. background: var(--neutral);
  2358. }
  2359.  
  2360. .post_search > div {
  2361. padding: 10px;
  2362. }
  2363.  
  2364. /* Colonne d'information du message */
  2365. .postsearch_infos {
  2366. border-right: var(--border);
  2367. font-size: var(--little-size);
  2368. }
  2369.  
  2370.  
  2371. /* RECHERCHE DE SUJET -----*/
  2372. /* Même CSS que la liste des sujets dans un forum */
  2373.  
  2374.  
  2375.  
  2376. /*** ------------------------------- ***/
  2377. /*** PAGE DE CONNEXION ------------- ***/
  2378.  
  2379. /* Centrer les pages de connexion */
  2380. form[name=form_login],
  2381. form[name=form_login] ~ .panel {
  2382. text-align: center;
  2383. }
  2384.  
  2385. form[name=form_login] .content {
  2386. display: grid;
  2387. justify-content: center;
  2388. justify-items: center;
  2389. }
  2390.  
  2391.  
  2392. /*** ------------------------------- ***/
  2393. /*** ELEMENTS FLOTTANTS ------------ ***/
  2394.  
  2395. /* Fenêtre popup "recherche" */
  2396. .overview {
  2397. background: var(--neutral);
  2398. border-radius: 5px;
  2399. border: var(--border);
  2400. padding: 10px;
  2401. position: fixed !important;
  2402. top: 50% !important;
  2403. }
  2404.  
  2405. /* Bouton rechercher */
  2406. .overview button[type="submit"] {
  2407. width: 26px;
  2408. height: 26px;
  2409. margin-left: 5px;
  2410. }
  2411.  
  2412. .overview div {
  2413. margin-bottom: 5px
  2414. }
  2415.  
  2416. .overview a {
  2417. float: right;
  2418. }
  2419.  
  2420.  
  2421. /* Boîte "recherche un utilisateur" */
  2422. #find_username {
  2423. display: none;
  2424. position: fixed;
  2425. left: 50%;
  2426. width: 450px;
  2427. margin-left: -225px;
  2428. top: 50%;
  2429. margin-top: -125px;
  2430. background-color: var(--neutral);
  2431. padding: 10px;
  2432. border: var(--border);
  2433. border-radius: 5px;
  2434. }
  2435.  
  2436.  
  2437. .comment_content {
  2438. margin-left: 50px;
  2439. }
  2440.  
  2441. .liensnav {
  2442. color: var(--white) !important;
  2443. }
  2444.  
  2445.  
  2446.  
  2447.  
  2448. .fond_tab {
  2449. background-color: var(--green);
  2450. border-radius: 5px;
  2451. padding-left: 4px;
  2452. padding-right: 4px;
  2453. border: 2px solid var(--green) !important;
  2454. }
  2455.  
  2456. /***FICHE DE PRESENTATION PAR WATSON***/
  2457. .fond1 {
  2458. background-color: #f5f4f4;
  2459. width: 490px;
  2460. display: flex;
  2461. flex-wrap: wrap;
  2462. justify-content: center;
  2463. border: 3px solid #eff1f2;
  2464. border-radius: 5px;
  2465.  
  2466. }
  2467.  
  2468. .fond2 {
  2469.  
  2470. width: 490px;
  2471. padding-top: 10px;
  2472. padding-bottom: 15px;
  2473. padding-left: 10px;
  2474. display: flex;
  2475. flex-wrap: wrap;
  2476. justify-content: space-between;
  2477. align-content: space-evenly;
  2478. align-items: space-evenly;
  2479. gap: 10px;
  2480.  
  2481. }
  2482. .fondname1 {
  2483. background: var(--degred);
  2484. border: 1px solid #641718;
  2485. border-radius: 5px;
  2486. width: 460px;
  2487. height: 70px;
  2488. padding: 2px;
  2489. }
  2490. .fondname2 {
  2491. background: var(--degred);
  2492. border: 1px solid #641718;
  2493. border-radius: 5px;
  2494. width: 456px;
  2495. height: 65px;
  2496. align-content: center;
  2497. }
  2498. .presnom {
  2499. text-align: center;
  2500. color: var(--white);
  2501. font-size: 30px;
  2502. }
  2503.  
  2504. .presline {
  2505. width: 200px;
  2506. border-bottom: 2px solid #ffffff;
  2507. }
  2508.  
  2509. .presquote {
  2510. text-align: center;
  2511. color: var(--white);
  2512. font-size: 18px;
  2513.  
  2514. }
  2515.  
  2516. .presava1 {
  2517. background: var(--degreen);
  2518. border: 1px solid #48554f;
  2519. border-radius: 5px;
  2520. width: 210px;
  2521. height: 330px;
  2522. padding: 2px;
  2523.  
  2524. }
  2525.  
  2526. .presava2 {
  2527. background: var(--degreen);
  2528. border: 1px solid #48554f;
  2529. border-radius: 5px;
  2530. width: 205px;
  2531. height: 325px;
  2532. padding: 2px;
  2533. display: flex;
  2534. justify-content: center;
  2535.  
  2536. }
  2537.  
  2538. .presimgava {
  2539. width: 200px;
  2540. border-radius: 5px;
  2541. }
  2542.  
  2543. .presinfofond1 {
  2544. background: var(--white);
  2545. border: 1px solid #e0dede;
  2546. border-radius: 5px;
  2547. width: 230px;
  2548. height: 330px;
  2549. padding: 2px;
  2550.  
  2551. }
  2552.  
  2553. .presinfofond2 {
  2554. background: var(--white);
  2555. border: 1px solid #e0dede;
  2556. border-radius: 5px;
  2557. width: 225px;
  2558. height: 325px;
  2559. padding: 5px;
  2560. display: flex;
  2561. justify-content: left;
  2562. gap: 5px;
  2563. flex-wrap: wrap;
  2564. align-content: flex-start;
  2565.  
  2566. }
  2567. .presinfo{
  2568. height: 317px;
  2569. display: flex;
  2570. flex-wrap: wrap;
  2571. overflow-x: auto;
  2572. font-size: 14px;
  2573. color: var(--green);
  2574. gap: 3px;
  2575. align-items: baseline;
  2576. }
  2577. .presinfotitle {
  2578. background-color: #f1f0f0;
  2579. border: 1px solid #e0dede;
  2580. border-radius: 5px;
  2581. font-size: 13px;
  2582. color: #804040;
  2583. text-transform: uppercase;
  2584. font-weight: 700;
  2585. padding: 2px;
  2586. height: max-content;
  2587.  
  2588. }
  2589.  
  2590. .anecnumber {
  2591. background: var(--degred);
  2592. border: 1px solid #753032;
  2593. border-radius: 5px;
  2594. font-size: 18px;
  2595. color: var(--white);
  2596. text-transform: uppercase;
  2597. font-weight: 700;
  2598. padding: 2px;
  2599. height: max-content !important;
  2600. width: 20px !important;
  2601. text-align: center;
  2602.  
  2603. }
  2604.  
  2605. .break {
  2606. flex-basis: 100%;
  2607. height: 0;
  2608. }
  2609.  
  2610. .caractere {
  2611. display: flex;
  2612. flex-wrap: wrap;
  2613. align-content: center;
  2614. }
  2615. .presfondtit1 {
  2616. background: linear-gradient(-45deg,#526e60,#5a8670)!important;
  2617. border: 1px solid #48554f;
  2618. border-radius: 5px;
  2619. width: 465px;
  2620.  
  2621. padding: 2px;
  2622. }
  2623. .presfondtit2 {
  2624. background: var(--degreen);
  2625. border: 1px solid #48554f;
  2626. border-radius: 5px;
  2627. width: 460px;
  2628. height: 40px;
  2629. align-content: center;
  2630. }
  2631.  
  2632. .presfondtit3 {
  2633. background: var(--degred);
  2634. border: 1px solid #753032;
  2635. border-radius: 5px;
  2636. width: 465px;
  2637.  
  2638. padding: 2px;
  2639. }
  2640. .presfondtit4 {
  2641. background: var(--degred);
  2642. border: 1px solid #753032;
  2643. border-radius: 5px;
  2644. width: 460px;
  2645. height: 40px;
  2646. align-content: center;
  2647. }
  2648. .prestitle {
  2649. text-align: center;
  2650. color: var(--white);
  2651. font-size: 30px;
  2652. }
  2653. .prescaract1 {
  2654. background-color: #f1f0f0;
  2655. border: 1px solid #e0dede;
  2656. border-radius: 5px;
  2657. width: 385px;
  2658. padding: 2px;
  2659. justify-content: left;
  2660. }
  2661. .prescaract2 {
  2662. background-color: var(--white);
  2663. border: 1px solid #e0dede;
  2664. border-radius: 5px;
  2665. width: 380px;
  2666. height: 130px;
  2667. align-content: center;
  2668. }
  2669. .prescaractexte {
  2670. padding: 5px;
  2671. font-size: 13px;
  2672. height: 130px;
  2673. overflow-x: auto;
  2674. margin-bottom: 5px;
  2675. }
  2676.  
  2677. .presicon1 {
  2678. width: 65px;
  2679. border-radius: 5px;
  2680. }
  2681.  
  2682. .presiconright {
  2683. position: relative;
  2684.  
  2685. }
  2686.  
  2687. .anecdotes {
  2688. display: flex;
  2689. flex-wrap: wrap;
  2690. align-content: center;
  2691. justify-content: space-around;
  2692. height: 130px;
  2693. }
  2694.  
  2695. .presiconleft {
  2696. position: relative;
  2697.  
  2698. }
  2699.  
  2700. .presanect1 {
  2701. background-color: #f1f0f0;
  2702. border: 1px solid #e0dede;
  2703. border-radius: 5px;
  2704. width: 385px;
  2705. padding: 2px;
  2706. margin-left: -15px;
  2707.  
  2708. }
  2709. .presanect2 {
  2710. background-color: var(--white);
  2711. border: 1px solid #e0dede;
  2712. border-radius: 5px;
  2713. width: 380px;
  2714. height: 130px;
  2715. display: flex;
  2716. align-items: baseline;
  2717. flex-wrap: wrap;
  2718. overflow-x: auto;
  2719.  
  2720. }
  2721. .presicon2 {
  2722. width: 100px;
  2723. border-radius: 5px;
  2724.  
  2725. }
  2726.  
  2727. .presirl1 {
  2728. background-color: #f1f0f0;
  2729. border: 1px solid #e0dede;
  2730. border-radius: 5px;
  2731. width: 345px;
  2732. padding: 2px;
  2733.  
  2734. }
  2735. .presirl2 {
  2736. background-color: var(--white);
  2737. border: 1px solid #e0dede;
  2738. border-radius: 5px;
  2739. width: 340px;
  2740. height: 100px;
  2741. align-content: center;
  2742.  
  2743. }
  2744. .presirltext {
  2745. height: 100px;
  2746. overflow-x: auto;
  2747. padding: 5px;
  2748. }
  2749.  
  2750. .histoire {
  2751. display: flex;
  2752. flex-wrap: wrap;
  2753. align-content: center;
  2754. align-items: baseline;
  2755. gap: 3px;
  2756. }
  2757.  
  2758. .preshist1 {
  2759. background-color: #f1f0f0;
  2760. border: 1px solid #e0dede;
  2761. border-radius: 5px;
  2762. width: 465px;
  2763. padding: 2px;
  2764. justify-content: left;
  2765. }
  2766. .preshist2 {
  2767. background-color: var(--white);
  2768. border: 1px solid #e0dede;
  2769. border-radius: 5px;
  2770. width: 460px;
  2771. align-content: baseline;
  2772. }
  2773.  
  2774. .histrigger {
  2775. display: flex;
  2776. flex-wrap: wrap;
  2777. justify-content: center;
  2778. align-items: space-evenly;
  2779.  
  2780. }
  2781.  
  2782. .histriggertext {
  2783. font-size: 14px;
  2784. color: #cfcaca;
  2785. margin-bottom: 5px;
  2786. }
  2787.  
  2788. .preshistexte {
  2789. padding: 5px;
  2790. font-size: 13px;
  2791. margin-bottom: 5px;
  2792. text-align: justify;
  2793. }
  2794.  
  2795. .titre1 {
  2796. background: var(--degred);
  2797. border: 1px solid #753032;
  2798. border-radius: 5px;
  2799. font-size: 14px;
  2800. color: var(--white);
  2801. font-weight: 500;
  2802. padding: 2px;
  2803. height: max-content !important;
  2804. text-align: center;
  2805.  
  2806. }
  2807.  
  2808. .titre2 {
  2809. background: var(--degred);
  2810. border: 1px solid #753032;
  2811. border-radius: 5px;
  2812. font-size: 14px;
  2813. color: var(--white);
  2814. font-weight: 500;
  2815. padding: 2px;
  2816. width: max-content;
  2817. height: max-content !important;
  2818. text-align: center;
  2819.  
  2820. }
  2821.  
  2822. .imgleft {
  2823. height: 100px;
  2824. float: left;
  2825. width: auto;
  2826. padding: 5px;
  2827. }
  2828.  
  2829. .imgright {
  2830. width: auto;
  2831. height: 100px;
  2832. float: right;
  2833. padding: 5px;
  2834. }
  2835.  
  2836. .iconfiche {
  2837. width: 100px;
  2838. border-radius: 5px;
  2839. }
  2840.  
  2841. .imgfiche {
  2842. border-radius: 5px;
  2843. width: 430px;
  2844. }
  2845. .iconbox {
  2846. display: flex;
  2847. flex-wrap: nowrap;
  2848. justify-content: space-around;
  2849. gap: 10px;
  2850. margin: auto;
  2851.  
  2852. }
  2853.  
  2854. .listback1 {
  2855. background: #f5f3f3;
  2856. border: 1px solid #e0dede;
  2857. border-radius: 5px;
  2858. width: 350px;
  2859. padding: 2px;
  2860.  
  2861. }
  2862.  
  2863. .listback2 {
  2864. background: #f5f3f3;
  2865. border: 1px solid #e0dede;
  2866. border-radius: 5px;
  2867. width: 345px;
  2868. padding: 5px;
  2869. display: flex;
  2870. justify-content: left;
  2871. gap: 5px;
  2872. flex-wrap: wrap;
  2873. align-content: flex-start;
  2874.  
  2875. }
  2876. .listinfo{
  2877. display: flex;
  2878. flex-wrap: wrap;
  2879. overflow-x: auto;
  2880. font-size: 14px;
  2881. gap: 3px;
  2882. align-items: baseline;
  2883. justify-content: left;
  2884. width: 380px;
  2885.  
  2886. }
  2887. .listtitle {
  2888. background: var(--degreen);
  2889. border: 1px solid #e0dede;
  2890. border-radius: 5px;
  2891. font-size: 13px;
  2892. color: #ffffff;
  2893. text-transform: uppercase;
  2894. padding: 2px;
  2895. height: max-content;
  2896.  
  2897. }
  2898. .listinfo2 {
  2899. display: flex;
  2900. flex-wrap: wrap;
  2901. overflow-x: auto;
  2902. font-size: 14px;
  2903. gap: 3px;
  2904. align-items: baseline;
  2905. justify-content: right;
  2906.  
  2907. }
  2908.  
  2909. .labellisting {
  2910. font-weight: 700;
  2911. text-transform: uppercase;
  2912. color: var(--green);
  2913. }
  2914.  
  2915. .labellisting2 {
  2916. font-weight: 700;
  2917. text-transform: uppercase;
  2918. color: var(--red);
  2919. }
  2920.  
  2921. /**INSTA**/
  2922. .topinsta {
  2923. background-color: #314644;
  2924. border-radius: 5px 5px 0px 0px;
  2925. text-align: left;
  2926. color: #ffffff;
  2927. font-size: 18px;
  2928. padding: 9px;
  2929. width: 490px;
  2930. }
  2931.  
  2932. .instabox {
  2933. display: flex;
  2934. flex-direction: row;
  2935. flex-wrap: wrap;
  2936. align-content: baseline;
  2937. justify-content: space-evenly;
  2938. align-items: center;
  2939. gap: 20px;
  2940. }
  2941.  
  2942. .instaphoto {
  2943. border-radius: 50%;
  2944. width: 80px;
  2945. }
  2946.  
  2947. .instapseudo {
  2948. background-color: #833432;
  2949. border-radius: 7px;
  2950. color: #ffffff;
  2951. font-size: 18px;
  2952. padding: 3px 10px 3px;
  2953. margin-top: -40px;
  2954. }
  2955.  
  2956. .instabutton {
  2957. background-color: #314644;
  2958. border-radius: 7px;
  2959. color: #ffffff;
  2960. font-size: 18px;
  2961. padding: 3px 10px 3px;
  2962. margin-top: -40px;
  2963. }
  2964.  
  2965. .instabox2 {
  2966. display: flex;
  2967. flex-wrap: wrap;
  2968. align-items: center;
  2969. margin-left: 20px;
  2970. gap: 20px;
  2971. }
  2972. .instastat {
  2973. font-size: 14px;
  2974. color: #000000;
  2975. margin-top: -95px;
  2976. float: right;
  2977. }
  2978. .break {
  2979. flex-basis: 100%;
  2980. height: 0;
  2981. }
  2982. .instades {
  2983. margin-top: -55px;
  2984. float: left;
  2985. margin-left: -30px;
  2986. }
  2987.  
  2988. .instafeed {
  2989. display: flex;
  2990. flex-wrap: wrap;
  2991. flex-direction: row;
  2992. align-content: stretch;
  2993. justify-content: space-evenly;
  2994. align-items: center;
  2995. gap: 20px;
  2996. margin-left: 10px;
  2997. margin-right: 10px;
  2998. margin-bottom: 20px;
  2999. margin-top: -250px;
  3000. }
  3001.  
  3002. #columness {column-count: 3; column-gap: 5px; width: 470;}
  3003.  
  3004. .moodboard {width: 490px; background-color: #f5f4f4; overflow:auto; border: 3px solid #eff1f2;
  3005. border-radius: 5px; padding: 10px;}
  3006.  
  3007. .mood {display: inline-block; margin-bottom:10px; margin-left:5px; }
  3008.  
  3009. .mood img {width: 100%; border-radius: 5px;}
  3010.  
  3011. .instafeed2 {
  3012. border-radius: 5px;
  3013. width: 100px;
  3014. }
  3015.  
  3016. .reels {
  3017. display: flex;
  3018. flex-wrap: wrap;
  3019. flex-direction: column;
  3020. justify-content: evenly;
  3021. align-content: center;
  3022. align-items: center;
  3023. gap: 10px;
  3024. }
  3025. .reels1 {
  3026. border-radius: 50%;
  3027. width: 50px;
  3028. }
  3029.  
  3030. .reels2 {
  3031. color: #314644;
  3032. font-size: 12px;
  3033. margin-top: -7px;
  3034. }
  3035.  
  3036. .instaimg {
  3037. border-radius: 15px;
  3038. width: 350px;
  3039. margin: auto;
  3040. }
  3041.  
  3042. .instamini {
  3043. border-radius: 50%;
  3044. width: 50px;
  3045. margin-left: 70px;
  3046. }
  3047.  
  3048. .caption {
  3049. display: flex;
  3050. flex-wrap: wrap;
  3051. flex-direction: column;
  3052. align-items: baseline;
  3053. }
  3054.  
  3055. .minipseudo {
  3056. text-transform: uppercase;
  3057. font-weight: bold;
  3058. color: #833432;
  3059. font-size: 14px;
  3060. margin-left: 20px;
  3061. margin-top: 5px;
  3062. }
  3063.  
  3064. .minicaption {
  3065. margin-left: 20px;
  3066. color: #000000;
  3067. }
  3068.  
  3069. .hash {
  3070. background-color: #ffffff;
  3071. border-radius: 5px;
  3072. padding: 3px;
  3073. text-transform: uppercase;
  3074. font-weight: bold;
  3075. font-size: 13px;
  3076. color: #314644;
  3077. }
  3078. .instareact {
  3079. display: flex;
  3080. flex-wrap: wrap;
  3081. justify-content: center;
  3082. margin-bottom: 20px;
  3083. gap: 20px;
  3084. margin-top: -20px;
  3085. }
  3086. .instabutton2 {
  3087. background-color: #314644;
  3088. border-radius: 7px;
  3089. color: #ffffff;
  3090. font-size: 18px;
  3091. padding: 3px 10px 3px;
  3092. }
  3093.  
  3094. .caption2 {
  3095. display: flex;
  3096. flex-wrap: wrap;
  3097. flex-direction: row;
  3098. align-items: center;
  3099. align-content: baseline;
  3100. gap: 5px;
  3101. }
  3102.  
  3103. .instamini2 {
  3104. border-radius: 50%;
  3105. width: 50px;
  3106. margin-left: 30px;
  3107. }
  3108. .notifpseudo {
  3109. text-transform: uppercase;
  3110. font-weight: bold;
  3111. color: #833432;
  3112. font-size: 14px;
  3113. }
  3114. .notifdes {
  3115. color: #000000;
  3116. }
  3117.  
  3118. .instacomment {
  3119. margin-left: 90px;
  3120. margin-top: -30px;
  3121. color: black;
  3122. }
  3123. .phonetit {
  3124. border-bottom: 2px solid #833432;
  3125. width: 100%;
  3126. }
  3127. .phonetitle {
  3128. border-bottom: 2px solid #833432;
  3129. font-size: 18px;
  3130. color: #833432;
  3131. text-transform: uppercase;
  3132. font-weight: 700;
  3133. }
  3134.  
  3135. .phonetitle2 {
  3136. border-bottom: 2px solid #833432;
  3137. font-size: 18px;
  3138. color: #314644;
  3139. text-transform: uppercase;
  3140. font-weight: 700;
  3141. }
  3142. .contactnom {
  3143. text-transform: uppercase;
  3144. font-weight: bold;
  3145. color: #314644;
  3146. font-size: 16px;
  3147. }
  3148.  
  3149. .phoneme {
  3150. border-radius: 50%;
  3151. width: 100px;
  3152. }
  3153. .phonefirst {
  3154. display: flex;
  3155. flex-wrap: wrap;
  3156. flex-direction: row;
  3157. align-items: center;
  3158. align-content: baseline;
  3159. justify-content: center;
  3160. gap: 5px;
  3161. }
  3162. .ercontact {
  3163. background-color: #ffffff;
  3164. border-radius: 5px;
  3165. padding: 3px;
  3166. color: #833432;
  3167. font-size: 16px;
  3168. font-weight: 700;
  3169. }
  3170. .phoneconvo {
  3171. display: flex;
  3172. flex-wrap: wrap;
  3173. flex-direction: row;
  3174. align-items: flex-start;
  3175. align-content: baseline;
  3176. gap: 5px;
  3177. width: 485px;
  3178. }
  3179. .phoneconvo2 {
  3180. display: flex;
  3181. flex-wrap: wrap;
  3182. flex-direction: row;
  3183. justify-content: flex-end;
  3184. align-items: flex-start;
  3185. align-content: baseline;
  3186. gap: 5px;
  3187. width: 475px;
  3188. }
  3189.  
  3190. .sender {
  3191. background-color: #314644;
  3192. border-radius: 5px;
  3193. color: #ffffff;
  3194. padding: 5px;
  3195. max-width: 60%;
  3196.  
  3197. }
  3198. .receiver {
  3199. background-color: #833432;
  3200. border-radius: 5px;
  3201. color: #ffffff;
  3202. padding: 5px;
  3203. max-width: 60%;
  3204. }
  3205. .phoneme2 {
  3206. border-radius: 50%;
  3207. width: 30px;
  3208. }
  3209. .phonedate {
  3210. font-weight: 700;
  3211. color: #833432;
  3212. text-align: center;
  3213. margin-left: 170px;
  3214. }
  3215. /* Add fontawesome to textarea font-family so the icons are visible */
  3216. .sceditor-container textarea { font-family:Verdana, Arial, Helvetica, sans-serif, FontAwesome !important }
  3217. /* button image */
  3218. .sceditor-button-fontawesome div { background:url(https://i.servimg.com/u/f19/19/06/98/92/fa-f10.png) !important }
  3219.  
  3220. /* drop down */
  3221. .sceditor-fontawesome {
  3222. width:220px;
  3223. height:250px;
  3224. overflow-y:auto;
  3225. }
  3226.  
  3227. /* icons */
  3228. .sceditor-fontawesome i {
  3229. color:#333;
  3230. font-size:20px;
  3231. text-align:center;
  3232. cursor:pointer;
  3233. padding:3px 0;
  3234. width:25%;
  3235. }[/code][/spoiler]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!