2019-08-25 00:23:24 +00:00
/ * *
* @ id default
* @ name Default
* @ description The default theme .
* @ author Starbeamrainbowlabs
* @ author_link https : / / starbeamrainbowlabs . com /
2019-09-01 20:18:14 +00:00
* @ minversion v0 . 20
2019-08-25 00:23:24 +00:00
* /
2019-08-27 23:26:27 +00:00
: root {
--bg-back : # eee8f2 ;
--bg-page : # faf8fb ;
2019-10-20 17:08:10 +00:00
--bg-page-inset : hsl ( 270 , 22 % , 88 % ) ;
2019-08-27 23:26:27 +00:00
2019-08-28 00:03:07 +00:00
--bg-comments-1 : hsl ( 31 , 64 % , 85 % ) ;
--bg-comments-2 : hsla ( 27 , 92 % , 68 % , 0 . 64 ) ;
--bg-comments-3 : hsla ( 30 , 84 % , 72 % , 0 . 54 ) ;
--bg-comments-4 : hsla ( 32 , 82 % , 62 % , 0 . 3 ) ;
2019-08-27 23:26:27 +00:00
--text-dark : # 111111 ;
2019-08-28 00:03:07 +00:00
--text-light : hsl ( 0 , 0 % , 96 % ) ;
2019-08-30 22:13:16 +00:00
--text-bright : hsl ( 274 , 40 % , 41 % ) ;
2019-08-28 00:03:07 +00:00
--text-placeholder-light : hsla ( 0 , 0 % , 100 % , 0 . 9 ) ;
--text-os-button : # 514C4C ;
2019-08-27 23:26:27 +00:00
--text-soft : rgba ( 33 , 33 , 33 , 0 . 3 ) ;
--text-ultrasoft : rgba ( 50 , 50 , 50 , 0 . 3 ) ;
2019-10-20 17:08:10 +00:00
--shadow : rgba ( 80 , 80 , 80 , 0 . 5 ) ;
2019-08-27 23:26:27 +00:00
--checkerboard-bg : # eee ;
--checkerboard-overlay : rgba ( 200 , 200 , 200 , 0 . 2 ) ;
2019-08-30 22:13:16 +00:00
--accent-a0 : hsl ( 253 , 79 % , 88 % ) ;
--accent-a0t : hsla ( 253 , 79 % , 88 % , 0 . 3 ) ;
2019-08-27 23:26:27 +00:00
--accent-a1 : # 9e7eb4 ;
--accent-a2 : # 8a62a7 ;
--accent-a3 : # 442772 ;
2019-08-30 22:13:16 +00:00
--accent-a4 : hsl ( 253 , 79 % , 88 % ) ;
2019-08-27 23:26:27 +00:00
--accent-b1 : # ffa74d ;
--accent-b2 : # fb701a ;
--accent-c1 : # e60707 ;
--accent-c2 : # 820f0f ; /*#8b1a1a*/
2019-09-01 15:57:19 +00:00
--accent-c3 : hsl ( 0 , 59 % , 20 % ) ; /*#8b1a1a*/
2019-10-07 17:15:45 +00:00
--accent-d1 : hsl ( 160 , 73 % , 26 % ) ;
--accent-d2 : hsl ( 159 , 76 % , 23 % ) ;
--accent-d3 : hsl ( 160 , 80 % , 70 % ) ;
2019-08-27 23:26:27 +00:00
--tag : # e2d5eb ;
--file : white ;
--addition : # 09b400 ;
--deletion : # cf1c11 ;
--nochange : # 847bc7 ;
2019-08-28 00:03:07 +00:00
/* #ffdb6d #36962c hsl(36, 78%, 80%) hsla(262, 92%, 68%, 0.42) */
2019-08-27 23:26:27 +00:00
}
2019-08-30 17:23:17 +00:00
@ media ( prefers-color-scheme : dark ) {
: root {
--bg-back : hsl ( 270 , 29 % , 28 % ) ;
--bg-page : hsl ( 273 , 15 % , 16 % ) ;
2019-10-20 17:05:57 +00:00
--bg-page-inset : hsl ( 273 , 20 % , 20 % ) ;
2019-08-30 17:23:17 +00:00
2019-08-31 20:34:08 +00:00
--bg-comments-1 : hsl ( 263 , 25 % , 16 % ) ;
--bg-comments-2 : hsla ( 264 , 45 % , 16 % , 0 . 64 ) ;
--bg-comments-3 : hsla ( 266 , 64 % , 28 % , 0 . 54 ) ;
--bg-comments-4 : hsla ( 268 , 82 % , 32 % , 0 . 3 ) ;
2019-08-30 20:31:14 +00:00
2019-08-30 17:23:17 +00:00
--text-dark : hsl ( 277 , 38 % , 89 % ) ;
2019-08-30 22:13:16 +00:00
--text-bright : hsl ( 274 , 75 % , 81 % ) ;
2019-08-30 17:23:17 +00:00
/* --text-light: hsl(0, 0%, 6%); */
2020-08-31 19:54:00 +00:00
--text-soft : hsla ( 0 , 0 % , 92 % , 0 . 6 ) ;
2019-08-30 17:23:17 +00:00
--text-ultrasoft : hsla ( 0 , 0 % , 95 % , 0 . 4 ) ;
--shadow : rgba ( 20 , 20 , 20 , 0 . 5 ) ;
2019-08-30 22:13:16 +00:00
--accent-a0 : hsl ( 253 , 79 % , 88 % ) ;
2019-08-30 17:23:17 +00:00
--accent-a1 : # 9e7eb4 ;
--accent-a2 : # 442772 ;
--accent-a3 : hsl ( 274 , 40 % , 41 % ) ;
2019-08-30 22:13:16 +00:00
--accent-a4 : hsl ( 253 , 49 % , 20 % ) ;
2019-08-30 17:23:17 +00:00
2020-08-31 19:54:00 +00:00
--accent-b2 : hsl ( 22 , 96 % , 64 % ) ;
2019-08-30 17:23:17 +00:00
--accent-c1 : hsl ( 5 , 100 % , 76 % ) ;
--accent-c2 : hsl ( 4 , 95 % , 68 % ) ; /*#8b1a1a*/
2019-09-01 15:57:19 +00:00
--accent-c3 : hsl ( 2 , 90 % , 58 % ) ;
2020-08-31 19:54:00 +00:00
2019-08-30 17:23:17 +00:00
--accent-d1 : hsl ( 160 , 73 % , 46 % ) ;
--tag : hsl ( 273 , 46 % , 27 % ) ;
}
a { color : hsl ( 208 , 67 % , 67 % ) ; }
2019-09-01 15:57:19 +00:00
a : hover { color : hsl ( 214 , 67 % , 75 % ) ; }
a : active , a : focus { color : hsl ( 214 , 87 % , 85 % ) ; }
2019-08-30 17:23:17 +00:00
a : visited { color : hsl ( 264 , 77 % , 65 % ) ; }
2019-10-25 11:12:57 +00:00
. invert-when-dark { filter : invert ( 100 % ) ; }
2019-08-30 17:23:17 +00:00
}
2019-08-28 00:07:13 +00:00
/* TODO: Refactor to use the CSS grid */
2019-08-27 23:26:27 +00:00
body { margin : 2 rem 0 0 0 ; background : var ( - - bg - back ) ; line-height : 1.45 em ; color : var ( - - text - dark ) ; font-family : sans-serif ; }
2016-06-12 20:14:24 +00:00
2019-08-27 23:26:27 +00:00
nav { display : flex ; background-color : var ( - - accent - a2 ) ; color : var ( - - accent - b1 ) ; }
nav . top { position : absolute ; top : 0 ; left : 0 ; right : 0 ; box-shadow : inset 0 -0.6 rem 0.8 rem -0.5 rem var ( - - shadow ) ; }
nav . bottom { position : absolute ; left : 0 ; right : 0 ; box-shadow : inset 0 0.8 rem 0.8 rem -0.5 rem var ( - - shadow ) ; }
2016-06-12 20:14:24 +00:00
2019-08-29 23:41:25 +00:00
nav . mega-menu { display : flex ; flex-direction : row ; padding-bottom : 0.4 em ; border-left : 3 px solid var ( - - accent - a3 ) ; border-right : 3 px solid var ( - - accent - a3 ) ; }
nav . mega-menu . category { padding : 0.3 em 1 em ; }
nav . mega-menu strong { display : block ; }
nav . mega-menu span { display : block ; }
nav > span { flex : 1 ; line-height : 2 ; display : inline-block ; margin : 0 ; padding : 0.3 rem 0.5 rem ; }
nav : not ( . mega-menu ) > span { border-left : 3 px solid var ( - - accent - a3 ) ; border-right : 3 px solid var ( - - accent - a3 ) ; }
2019-08-28 15:32:22 +00:00
nav : not ( . nav-more-menu ) > span { text-align : center ; }
2019-08-29 23:41:25 +00:00
nav : not ( . nav-more-menu ) a { text-decoration : none ; color : inherit ; }
nav : not ( . nav-more-menu ) : not ( . mega-menu ) > span > a { font-weight : bolder ; }
2016-06-12 20:14:24 +00:00
. nav-divider { color : transparent ; }
2019-08-29 23:41:25 +00:00
. nav-more { position : relative ; background-color : var ( - - accent - a3 ) ; min-width : 10 em ; }
2020-10-25 22:50:03 +00:00
label { font-weight : bold ; }
2019-08-26 15:31:30 +00:00
label { cursor : pointer ; }
2019-08-29 23:41:25 +00:00
. nav-more-menu { z-index : 10000 ; position : absolute ; flex-direction : column ; top : 2.6 rem ; right : 100000 px ; text-align : left ; background-color : var ( - - accent - a2 ) ; border-top : 3 px solid var ( - - accent - a3 ) ; border-bottom : 3 px solid var ( - - accent - a3 ) ; }
input [ type = checkbox ] : checked ~ . nav-more-menu { right : -0.2 rem ; box-shadow : 0.4 rem 0.4 rem 1 rem 0 var ( - - shadow ) ; }
. nav-more-menu span { white-space : nowrap ; }
2016-06-12 20:14:24 +00:00
. inflexible { flex : none ; }
. off-screen { position : absolute ; top : -1000 px ; left : -1000 px ; }
2019-08-30 22:13:16 +00:00
input [ type = search ] { width : 14 rem ; padding : 0.3 rem 0.4 rem ; font-size : 1 rem ; color : var ( - - text - light ) ; background : var ( - - accent - a0t ) ; border : 0 ; border-radius : 0.3 rem ; }
2019-08-28 00:03:07 +00:00
input [ type = search ] :: -webkit-input-placeholder { color : var ( - - text - placeholder - light ) ; }
input [ type = search ] :: -moz-placeholder { color : var ( - - text - placeholder - light ) ; }
2019-08-30 22:13:16 +00:00
input : focus , textarea : focus { outline : 0.15 em solid var ( - - accent - a0 ) ; }
2016-06-12 20:14:24 +00:00
input [ type = button ] , input [ type = submit ] { cursor : pointer ; }
2017-05-28 18:30:50 +00:00
. sidebar + . main-container nav . bottom { position : relative ; }
2020-07-07 20:34:57 +00:00
. sidebar { position : relative ; z-index : 100 ; margin-top : 0.6 rem ; padding : 1 rem 3 rem 2 rem 0.4 rem ; background : var ( - - accent - a1 ) ; box-shadow : inset -0.6 rem 0 0.8 rem -0.5 rem var ( - - shadow ) ; max-width : 20 vw ; resize : horizontal ; overflow-x : scroll ; }
2019-08-27 23:26:27 +00:00
. sidebar a { color : var ( - - accent - b1 ) ; }
2016-06-12 20:14:24 +00:00
. sidebar ul { position : relative ; margin : 0.3 rem 0.3 rem 0.3 rem 1 rem ; padding : 0.3 rem 0.3 rem 0.3 rem 1 rem ; list-style-type : none ; }
. sidebar li { position : relative ; margin : 0.3 rem ; padding : 0.3 rem ; }
2019-08-27 23:26:27 +00:00
. sidebar ul : before { content : "" ; position : absolute ; top : 0 ; left : 0 ; height : 100 % ; border-left : 2 px dashed var ( - - accent - a3 ) ; }
. sidebar li : before { content : "" ; position : absolute ; width : 1 rem ; top : 0.8 rem ; left : -1.2 rem ; border-bottom : 2 px dashed var ( - - accent - a3 ) ; }
2016-06-12 20:14:24 +00:00
. preview { text-align : center ; }
2019-08-27 23:26:27 +00:00
. preview : hover img , . preview : hover video , . preview : hover audio { max-width : 100 % ; background-color : var ( - - checkerboard - bg ) ; background-image : linear-gradient ( 45 deg , var ( - - checkerboard - overlay ) 25 % , transparent 25 % , transparent 75 % , var ( - - checkerboard - overlay ) 75 % , var ( - - checkerboard - overlay ) ) , linear-gradient ( 45 deg , var ( - - checkerboard - overlay ) 25 % , transparent 25 % , transparent 75 % , var ( - - checkerboard - overlay ) 75 % , var ( - - checkerboard - overlay ) ) ; background-size : 2 em 2 em ; background-position : 0 0 , 1 em 1 em ; }
2016-06-12 20:14:24 +00:00
. image-controls ul { list-style-type : none ; margin : 5 px ; padding : 5 px ; }
. image-controls li { display : inline-block ; margin : 5 px ; padding : 5 px ; }
. link-display { margin-left : 0.5 rem ; }
2019-08-28 00:03:07 +00:00
. button { appearance : button ; -moz- appearance : button ; -webkit- appearance : button ; text-decoration : none ; font-size : 0.9 em ; }
2016-06-12 20:14:24 +00:00
2022-02-07 02:25:34 +00:00
audio , video , img , iframe { max-width : 100 % ; }
2019-06-01 19:25:44 +00:00
object { width : 100 % ; height : 90 vh ; }
2016-06-12 20:14:24 +00:00
figure : not ( . preview ) { display : inline-block ; }
figure : not ( . preview ) > : first-child { display : block ; }
figcaption { text-align : center ; }
2017-06-18 11:00:40 +00:00
. avatar { vertical-align : middle ; }
2016-06-12 20:14:24 +00:00
. printable { padding : 2 rem ; }
2017-07-02 20:14:50 +00:00
h1 { text-align : center ; }
2016-06-12 20:14:24 +00:00
. sitename { margin-top : 5 rem ; margin-bottom : 3 rem ; font-size : 2.5 rem ; }
. logo { max-width : 4 rem ; max-height : 4 rem ; vertical-align : middle ; }
. logo . small { max-width : 2 rem ; max-height : 2 rem ; }
2019-08-27 23:26:27 +00:00
main : not ( . printable ) { position : relative ; z-index : 1000 ; padding : 2 em 2 em 0.5 em 2 em ; background : var ( - - bg - page ) ; box-shadow : 0 0.1 rem 1 rem 0.3 rem var ( - - shadow ) ; }
2016-06-12 20:14:24 +00:00
2019-08-27 23:26:27 +00:00
blockquote { padding-left : 1 em ; border-left : 0.2 em solid var ( - - accent - a3 ) ; border-radius : 0.2 rem ; }
2016-06-12 20:14:24 +00:00
2019-10-20 17:05:57 +00:00
pre { white-space : pre-wrap ; padding : 0.3 em 0.5 em ; background : var ( - - bg - page - inset ) ; border-radius : 0.25 em ; box-shadow : inset 0 0 0.5 em var ( - - shadow ) ; }
2019-10-20 17:09:44 +00:00
code { font-size : 1.1 em ; }
2023-02-25 15:06:16 +00:00
code : not ( : has ( > pre ) ) { background : var ( - - bg - page - inset ) ; }
2019-01-30 21:36:21 +00:00
2018-04-02 18:51:47 +00:00
a { cursor : pointer ; }
2019-10-07 15:43:35 +00:00
a : focus { outline-width : 0.1 em ; }
2019-08-27 23:26:27 +00:00
a . redlink : link { color : var ( - - accent - c1 ) ; }
a . redlink : visited { color : var ( - - accent - c2 ) ; }
2019-09-01 15:57:19 +00:00
a . redlink : active , a . redlink : focus { color : var ( - - accent - c3 ) ; }
2019-01-05 23:04:40 +00:00
a . interwiki_link :: before { content : "\\1f6f8" ; display : inline-block ; margin-right : 0.25 em ; }
2019-08-27 23:26:27 +00:00
a . interwiki_link { color : var ( - - accent - d1 ) ; }
2019-10-07 17:15:45 +00:00
a . interwiki_link : visited { color : var ( - - accent - d2 ) ; }
a . interwiki_link : active { color : var ( - - accent - d3 ) ; }
2016-06-12 20:14:24 +00:00
2020-05-23 19:38:01 +00:00
. spoiler { background : var ( - - accent - a2 ) ; border : 0.1 em dashed var ( - - accent - b1 ) ; border-radius : 0.2 em ; color : transparent !important ; text-decoration : none ; }
. spoiler : target { color : inherit !important ; }
/* Ref https://devdocs.io/html/element/del#Accessibility_concerns it's better than nothing, but I'm not happy with it. How would a screen reader user skipt he spsoiler if they don't want to hear it? */
. spoiler :: before , . spoiler :: after {
clip-path : inset ( 100 % ) ; clip : rect ( 1px , 1px , 1px , 1px ) ;
position : absolute ; width : 1px ; height : 1px ;
overflow : hidden ; white-space : nowrap ;
}
. spoiler :: before { content : " [spoiler start] " ; }
. spoiler :: after { content : " [spoiler end] " ; }
2018-06-30 10:46:07 +00:00
. matching-tags-display { display : flex ; margin : 0 -2 em ; padding : 1 em 2 em ; background : hsla ( 30 , 84 % , 72 % , 0.75 ) ; }
2019-08-27 23:26:27 +00:00
. matching-tags-display > label { flex : 0 ; font-weight : bold ; color : var ( - - accent - a3 ) ; }
2018-06-30 10:46:07 +00:00
. matching-tags-display > . tags { flex : 2 ; }
2016-06-12 20:14:24 +00:00
. search-result { position : relative ; }
2019-08-27 23:26:27 +00:00
. search-result :: before { content : attr ( data - result - number ) ; position : relative ; top : 3 rem ; color : var ( - - text - soft ) ; font-size : 2 rem ; }
. search-result :: after { content : "Rank: " attr ( data - rank ) ; position : absolute ; top : 3.8 rem ; right : 0.7 rem ; color : var ( - - text - ultrasoft ) ; }
2016-08-19 12:51:38 +00:00
. search-result > h2 { margin-left : 3 rem ; }
2017-10-14 21:48:58 +00:00
. search-result-badges { font-size : 1 rem ; font-weight : normal ; }
2018-06-30 10:20:47 +00:00
. search-context { min-height : 3 em ; max-height : 20 em ; overflow : hidden ; }
2016-06-12 20:14:24 +00:00
2019-08-27 23:37:55 +00:00
. editform { position : relative ; }
2020-05-23 19:38:01 +00:00
textarea [ name = content ] { resize : none ; min-height : 75 vh ; }
2019-08-27 23:37:55 +00:00
. fit-text-mirror { position : absolute ; top : 0 ; left : -10000 vw ; word-wrap : break-word ; white-space : pre-wrap ; }
2020-01-26 21:04:39 +00:00
. awesomplete { width : 100 % ; color : var ( - - text - dark ) ; }
. awesomplete > ul :: before { display : none ; }
/* Overly specific to override library css */
. awesomplete > ul [ role = listbox ] { top : 2.5 em ; background : var ( - - accent - a2 ) ; }
2016-12-16 21:29:30 +00:00
main label : not ( . link-display-label ) { display : inline-block ; min-width : 16 rem ; }
2016-10-30 10:50:38 +00:00
input [ type = text ] : not ( . link-display ) , input [ type = password ] , input [ type = url ] , input [ type = email ] , input [ type = number ] , textarea { margin : 0.5 rem 0 ; }
2020-07-18 23:05:20 +00:00
input [ type = text ] , input [ type = password ] , input [ type = url ] , input [ type = email ] , input [ type = number ] , textarea , # search-box { padding : 0.5 rem 0.8 rem ; background : var ( - - accent - a4 ) ; border : 0 ; border-radius : 0.3 rem ; font-size : 1 rem ; color : var ( - - text - bright ) ; }
textarea , . fit-text-mirror { min-height : 10 em ; line-height : 1.3 em ; font-size : 1.25 rem ; }
2017-03-05 16:15:50 +00:00
textarea , textarea [ name = content ] + pre , textarea ~ input [ type = submit ] , # search-box { width : calc ( 100 % - 0.3 rem ) ; box-sizing : border-box ; }
2016-06-12 20:14:24 +00:00
textarea ~ input [ type = submit ] { margin : 0.5 rem 0 ; padding : 0.5 rem ; font-weight : bolder ; }
2020-10-25 22:50:03 +00:00
. editform input [ type = text ] { width : calc ( 100 % - 0.3 rem ) ; box-sizing : border-box ; }
. editform label { margin-left : 1 em ; }
2017-06-29 05:33:57 +00:00
input . edit-page-button [ type = 'submit' ] { width : 49.5 % ; box-sizing : border-box ; }
2019-08-26 15:31:30 +00:00
input [ type = radio ] { transform : scale ( 2 ) ; }
input [ type = submit ] . large { width : 100 % ; box-sizing : border-box ; padding : 0.5 em ; font-size : 1.25 em ; font-weight : bolder ; }
2020-10-25 22:50:03 +00:00
. smartsave-restore { margin-bottom : 1 em ; }
2017-07-02 20:14:50 +00:00
. preview-message { text-align : center ; }
2017-09-15 16:15:11 +00:00
@ media ( min-width : 800px ) {
. jump-to-comments { position : absolute ; top : 3.5 em ; right : 2 em ; display : block ; text-align : right ; pointer-events : none ; }
}
@ media ( max-width : 799px ) {
. jump-to-comments { display : inline-block ; }
. link-parent-page { display : inline-block ; }
}
2017-05-22 19:01:25 +00:00
. jump-to-comments > a { pointer-events : all ; }
2016-06-12 20:14:24 +00:00
. file-gallery { margin : 0.5 em ; padding : 0.5 em ; list-style-type : none ; }
. file-gallery > li { display : inline-block ; min-width : attr ( data - gallery - width ) ; padding : 1 em ; text-align : center ; }
2019-08-27 23:26:27 +00:00
. file-gallery > li img , . file-gallery > li video , . file-gallery > li audio { display : block ; margin : 0 auto ; background-color : var ( - - file ) ; }
2016-06-12 20:14:24 +00:00
. page-tags-display { margin : 0.5 rem 0 0 0 ; padding : 0 ; list-style-type : none ; }
2019-08-27 23:26:27 +00:00
. page-tags-display li { display : inline-block ; margin : 0.5 rem ; padding : 0.5 rem ; background : var ( - - tag ) ; white-space : nowrap ; }
2019-08-28 00:03:07 +00:00
. page-tags-display li a { color : var ( - - accent - b2 ) ; text-decoration : none ; }
2020-07-08 20:57:25 +00:00
. page-tags-display li :: before { content : "\\A" ; color : transparent ; user-select : none ; position : relative ; top : 0.03 rem ; left : -0.9 rem ; width : 0 ; height : 0 ; border-top : 0.6 rem solid transparent ; border-bottom : 0.6 rem solid transparent ; border-right : 0.5 rem solid var ( - - tag ) ; }
2016-06-12 20:14:24 +00:00
. page-list { list-style-type : none ; margin : 0.3 rem ; padding : 0.3 rem ; }
. page-list li : not ( . header ) { margin : 0.3 rem ; padding : 0.3 rem ; }
2019-10-24 18:43:30 +00:00
. page-list li . size { margin-left : 0.7 rem ; color : var ( - - text - soft ) ; }
2016-06-12 20:14:24 +00:00
. page-list li . editor { display : inline-block ; margin : 0 0.5 rem ; }
. page-list li . tags { margin : 0 1 rem ; }
. tag-list { list-style-type : none ; margin : 0.5 rem ; padding : 0.5 rem ; }
. tag-list li { display : inline-block ; margin : 1 rem ; }
2020-03-14 17:21:14 +00:00
. mini-tag { background : var ( - - tag ) ; margin : 0 0.4 em ; padding : 0.2 rem 0.4 rem ; color : var ( - - accent - b2 ) ; text-decoration : none ; }
2016-06-12 20:14:24 +00:00
2022-03-12 02:52:53 +00:00
. onebox { display : flex ; flex-direction : column ;
2022-03-12 13:23:12 +00:00
background : var ( --tag ) ; border : 0 . 2em solid var ( --accent-b1 ) ; padding : 0 . 5em ; text-decoration : none ; }
. onebox-header { font-weight : bolder ; font-size : 125 % ; border-bottom : 0.1 em solid var ( - - accent - b1 ) ; }
2022-03-12 02:52:53 +00:00
2019-08-26 15:31:30 +00:00
. grid-large { display : grid ; grid-template-columns : repeat ( auto - fit , minmax ( 25 em , 1 fr ) ) ; grid-auto-rows : min-content ; grid-gap : 1 em ; justify-content : center ; }
. theme-item { justify-self : center ; text-align : center ; }
. theme-item label { min-width : auto ; }
2019-08-28 00:03:07 +00:00
. help-section-header :: after { content : "#" attr ( id ) ; float : right ; color : var ( - - text - soft ) ; font-size : 0.8 rem ; font-weight : normal ; }
2016-06-12 20:14:24 +00:00
2017-04-17 13:01:19 +00:00
. stacked-bar { display : flex ; }
. stacked-bar-part { break-inside : avoid ; white-space : pre ; padding : 0.2 em 0.3 em ; }
2016-06-12 20:14:24 +00:00
. cursor-query { cursor : help ; }
summary { cursor : pointer ; }
2019-08-27 23:26:27 +00:00
. larger { color : var ( - - addition ) ; }
. smaller , . deletion { color : var ( - - deletion ) ; }
. nochange { color : var ( - - nochange ) ; font-style : italic ; }
2016-06-12 20:14:24 +00:00
. significant { font-weight : bolder ; font-size : 1.1 rem ; }
. deletion , . deletion > . editor { text-decoration : line-through ; }
. highlighted-diff { white-space : pre-wrap ; }
. diff-added { background-color : rgba ( 31 , 171 , 36 , 0.6 ) ; color : rgba ( 23 , 125 , 27 , 1 ) ; }
. diff-removed { background-color : rgba ( 255 , 96 , 96 , 0.6 ) ; color : rgba ( 191 , 38 , 38 , 1 ) ; }
. newpage :: before { content : "N" ; margin : 0 0.3 em 0 -1 em ; font-weight : bolder ; text-decoration : underline dotted ; }
2018-03-18 21:38:58 +00:00
. move :: before { content : "\\1f69a" ; font-size : 1.25 em ; margin : 0 0.1 em 0 -1.1 em ; }
2016-06-12 20:14:24 +00:00
. upload :: before { content : "\\1f845" ; margin : 0 0.1 em 0 -1.1 em ; }
2017-05-20 14:18:22 +00:00
. new-comment :: before { content : "\\1f4ac" ; margin : 0 0.1 em 0 -1.1 em ; }
2018-07-03 11:54:57 +00:00
. reversion :: before { content : "\\231b" ; margin : 0 0.1 em 0 -1.1 em ; }
2016-06-12 20:14:24 +00:00
2020-07-28 22:17:11 +00:00
. similar-page-suggestions { padding : 1 em 2 em ; background : var ( - - bg - page - inset ) ; position : relative ; z-index : 2000 ; box-shadow : 0 0.1 rem 1 rem 0.3 rem var ( - - shadow ) ; }
2020-05-26 12:16:33 +00:00
. similar-page-suggestions > h2 { text-align : center ; }
2020-07-28 20:46:39 +00:00
. similar-page-suggestions-list { list-style-type : none ;
padding : 0 ; display : grid ; grid : auto / repeat ( auto-fit , minmax ( min ( 15em , 100 % ) , 1fr ) ) ; justify-items : center ; grid-gap : 1em ; }
2020-05-26 12:16:33 +00:00
2019-08-28 00:03:07 +00:00
. comments { padding : 1 em 2 em ; background : var ( - - bg - comments -1 ) ; box-shadow : 0 0.1 rem 1 rem 0.3 rem var ( - - shadow ) ; }
. comments . not-logged-in { padding : 0.3 em 0.65 em ; background : var ( - - bg - comments -2 ) ; border-radius : 0.2 em ; font-style : italic ; }
. comments textarea { resize : vertical ; }
2017-05-14 20:51:04 +00:00
2019-08-28 00:03:07 +00:00
. comment { margin : 1 em 0 ; padding : 0.01 em 0 ; background : var ( - - bg - comments -3 ) ; }
2017-05-14 20:51:04 +00:00
. comment-header { padding : 0 1 em ; }
. comment . name { font-weight : bold ; }
. comment-body { padding : 0 1 em ; }
. comment-footer { padding-left : 1 em ; }
. comment-footer-item { padding : 0 0.3 em ; }
2019-08-28 00:03:07 +00:00
. comment-footer . delete-button { appearance : button ; -moz- appearance : button ; -webkit- appearance : button ; text-decoration : none ; color : var ( - - text - os - button ) ; }
2017-05-14 20:51:04 +00:00
. permalink-button { text-decoration : none ; }
. comments-list . comments-list . comment { margin : 1 em ; }
2019-08-28 00:03:07 +00:00
. reply-box-container . active { padding : 1 em ; background : var ( - - bg - comments -4 ) ; }
2017-05-14 20:51:04 +00:00
2016-06-12 20:14:24 +00:00
footer { padding : 2 rem ; }
2020-01-16 20:13:01 +00:00
/* Small screen adjustments */
@ media ( max-width : 480px ) {
body {
margin : 0 ;
}
2020-07-28 21:21:56 +00:00
nav . top , nav . bottom {
2020-01-16 20:13:01 +00:00
position : static ;
flex-direction : column ;
}
2020-07-28 21:21:56 +00:00
input [ type = checkbox ] : checked ~ . nav-more-menu {
position : static ;
}
2020-01-16 20:13:01 +00:00
nav . mega-menu {
flex-direction : column ;
}
nav . top > span : first-child {
border-top : 3px solid var ( --accent-a3 ) ;
}
main : not ( . printable ) {
padding : 1em 1em 0 . 5em 1em ;
}
. comments {
padding : 1em ;
}
footer {
padding : 1em ;
}
}
